如何在JSRender中遍历对象数组?

问题描述

我只能从JSRender中的对象数组中渲染第一个对象。我该如何迭代所有对象?

{{for #data}}显示data数组中的第一个对象。

var data = [{
    "id": "15","name": "Jane Doe","value": null
},{
    "id": "6","name": "John Smith","value": "123-456-7890"
},"name": null,"value": "223-456-7890"
}]

Codepen:https://codepen.io/ryanmac/pen/ZEWQMNV

HTML:

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">
  
<table><tbody>
{{for #data}}
  <tr><td><b>name:</b> {{:name}}</td><td>{{:value}}</td></tr>
{{/for}}
</tbody></table>

JS:

var data = [{
    "id": "15","value": "223-456-7890"
}];
var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);

输出

名称:Jane Doe

其他行又去了哪里?我该如何调试?

解决方法

这是因为您没有关闭<script>标签

<script id="theTmpl" type="text/x-jsrender">
 ....
</script>