JSRender不呈现对象

时间:2014-06-18 18:28:37

标签: javascript jquery arrays json jsrender

我有从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>

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

1 个答案:

答案 0 :(得分: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}));