JSRender 不为对象渲染答案

【问题标题】：JSRender does not render for objectJSRender 不为对象渲染
【发布时间】：2014-06-18 18:28:37
【问题描述】：

我有从 PHP 返回的数据，然后我对其进行解析。数据显示名为 empName 的属性，但不显示嵌套属性。我需要在我的 javascript 代码中纠正什么问题。这是从 PHP 返回的 JSON 字符串（名为 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>

这是否意味着我必须在我的模板中循环两次？

【问题讨论】：

标签： javascript jquery arrays json jsrender

【解决方案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}));

【讨论】：