javascript - 如何在 jsRender 模板中迭代 JSON 数组？

Question

我有这个 HTML 和 jsRender 模板:

<div id="output"></div>

<script id="template" type="text/x-jsrender">
<ul>
    {{for}}
    <li>{{:name}} likes to wear {{:shirtColor}} shirts</li>
    {{/for}}        
</ul>
</script>​

我有这样的 javascript (jQuery):

var data = [{
    name: 'Dan Wahlin',
    shirtColor: 'white'},
{
    name: 'John Papa',
    shirtColor: 'black'},
{
    name: 'Scott Guthrie',
    shirtColor: 'red'}
]
;

$('#output').html($('#template').render(data));​

有些人可能会看到，这是 John Papa 的一个例子。也就是我修改了一下。但它不能正常工作。原因是 jsRender 需要 Json 中的根对象，如 Johns 示例中的 {{for}} 是 {{for people}} 并且数据对象如下所示:

var data = { people: [{
    name: 'Dan Wahlin',
    shirtColor: 'white'},
{
    name: 'John Papa',
    shirtColor: 'black'},
{
    name: 'Scott Guthrie',
    shirtColor: 'red'}
]
}
;

在我的 ASP.NET MVC Controller 中，返回的 Json 没有根对象。我怎样才能让它工作？更改 Json 格式(我该怎么做？)？还是我的 jsRender 代码做错了什么？

提前致谢!

Answer 1

我遇到了同样的问题。以下内容应该可以为您解决问题:

<script id="template" type="text/x-jsrender">
    <ul>
        {{for #data}}
            <li>{{>name}} likes to wear {{>shirtColor}} shirts</li>
        {{/for}}
    </ul>
</script>

这允许您遍历传递给渲染方法的数组，而不是像 Jesus 的回答中那样遍历单个项目。