如何在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控制器中,Json返回的不是root对象.我怎样才能使这个工作？更改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>

这允许你循环遍历render方法的数组,而不是像Jesus的答案那样遍历单个项目.