Блог

Главная - Вопросы по программированию - JsRender не выполняет рендеринг для объекта

JsRender не выполняет рендеринг для объекта

#javascript #jquery #arrays #json #jsrender

#javascript #jquery #массивы #json #jsrender

Вопрос:

Ну, у меня есть данные, возвращенные из PHP, которые я затем анализирую. Данные отображаются для атрибута с именем EmpName, но не для вложенных. Что не так, что мне нужно исправить в моем коде javascript. Вот строка JSON, которая возвращается из PHP (вывод переменной с именем info):

 [{"empName":"Sam","skillDetails":[{"skill":"Javascript","level":"Intermediate"}]}]

И вот шаблон (данные не отображаются для навыков и уровня)

 <script id="tmplEmpDetails" type="text/x-jsrender">
{{if data.length > 0}}
{{for data}}
<tr>
    <td class="tg-spn1">{{:#view.data.empName}}</td>
    <td class="tg-spn1">{{:#view.data.skillDetails.skill}}</td>
    <td class="tg-spn1  ">{{:#view.data.skillDetails.level}}</td>
</tr>
{{/for}}    
{{/if}}

Javascript:

         $.post( "indexBase.php",
        $('#str').val(JSON.stringify(empObj)),                               
        function(info){                             
            var result = JSON.parse(info);                                                              
            $( "#tblEmpDetails tr[id!='hdrEmpDetails']" ).empty();
            $("#tblEmpDetails").append($("#tmplEmpDetails").render({
                    data : result
                }));                
        }); 

    $("#mainForm").submit( function() {                         
        return false;   
    }); 

    $('.trSkillCls').not(':first').remove();
});

И, наконец, HTML (конечно, мне тоже нужно исправить свой HTML)

 <table class="tg" width="100%" id="tblEmpDetails">
<tr id="hdrEmpDetails">
    <th class="tg-s6z2" ><strong>Employee</strong></th>
    <th class="tg-s6z2" ><strong>Skill</strong></th>
    <th class="tg-s6z2" ><strong>Level</strong></th>
</tr>
</table>

Означает ли это, что мне нужно дважды выполнить цикл for в моем шаблоне?

Ответ №1:

Я изменил HTML и скрипт..

 <div id="divEmpDetails" class="designDiv" width="100%">
</div>  

<script id="tmplEmpDetails" type="text/x-jsrender">
{{for data}}
  <span class="tg-spn1">Employee: <strong>{{>empName}}</strong></span>
  <ul>
    {{for skillDetails}}
     <li>{{>skill}} : {{>level}}</li>
    {{/for}}
 </ul>  
    {{/for}}
 </script>  

$( "#divEmpDetails" ).empty();
$("#divEmpDetails").append($("#tmplEmpDetails").render({data:result}));
Метки: