如何迭代Handlebars中的对象数组?

这似乎是一个愚蠢的问题,但我似乎无法find答案的任何地方。

我打这个Web Api,返回JSON格式的对象数组:

对象数组

把手文档显示以下示例:

<ul class="people_list"> {{#each people}} <li>{{this}}</li> {{/each}} </ul> 

在以下方面:

 { people: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley" ] } 

在我的情况下,我没有数组的名称,它只是响应的根对象。 我试过用{{#each}}没有运气。

第一次使用把手…我错过了什么?

UPDATE

这里有一个简单的小提琴来显示我问: http : //jsfiddle.net/KPCh4/2/

句柄是否需要上下文variables是一个对象而不是数组?

你可以传递给每个块。 看到这里: http : //jsfiddle.net/yR7TZ/1/

 {{#each this}} <div class="row"></div> {{/each}} 

我的意思是在template()调用..

您只需要将结果作为对象传递。 所以,而不是打电话

 var html = template(data); 

 var html = template({apidata: data}); 

并在模板代码中使用{{#each apidata}}

演示在http://jsfiddle.net/KPCh4/4/
if崩溃的代码,删除一些剩余的

这个小提琴既有each和直接json。 http://jsfiddle.net/streethawk707/a9ssja22/

以下是迭代数组的两种方法。 一个是直接json传递,另一个命名json数组,同时传递给内容持有者。

Eg1:下面的例子直接调用small_datavariables中的json键(data)。

在html中使用下面的代码:

 <div id="small-content-placeholder"></div> 

下面的代码可以放在html或者html的主体中:

 <script id="small-template" type="text/x-handlebars-template"> <table> <thead> <th>Username</th> <th>email</th> </thead> <tbody> {{#data}} <tr> <td>{{username}} </td> <td>{{email}}</td> </tr> {{/data}} </tbody> </table> </script> 

下面的文件准备就绪:

 var small_source = $("#small-template").html(); var small_template = Handlebars.compile(small_source); 

下面是json:

 var small_data = { data: [ {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "alan1@test.com" }, {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan2@test.com" } ] }; 

最后将json附加到内容持有者:

 $("#small-content-placeholder").html(small_template(small_data)); 

Eg2:使用每个迭代。

考虑下面的json。

 var big_data = [ { name: "users1", details: [ {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" }, {username: "allison1", firstName: "Allison", lastName: "House", email: "allison@test.com" }, {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" } ] }, { name: "users2", details: [ {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" }, {username: "allison2", firstName: "Allison", lastName: "House", email: "allison@test.com" }, {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" } ] } ]; 

在将json传递给内容持有者时,只需以这种方式命名即可:

 $("#big-content-placeholder").html(big_template({big_data:big_data})); 

模板如下所示:

 <script id="big-template" type="text/x-handlebars-template"> <table> <thead> <th>Username</th> <th>email</th> </thead> <tbody> {{#each big_data}} <tr> <td>{{name}} <ul> {{#details}} <li>{{username}}</li> <li>{{email}}</li> {{/details}} </ul> </td> <td>{{email}}</td> </tr> {{/each}} </tbody> </table> </script> 

把手可以使用一个数组作为上下文。 你可以使用. 作为数据的根源。 所以你可以用{{#each .}}循环你的数组数据。

这里是你的小提琴的更新的工作版本

使用this{{this}} 。 请参阅node.js中的以下代码:

 var Handlebars= require("handlebars"); var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"]; var source= "<ul>{{#each this}}<li>{{this}}</li>{{/each}}</ul>"; var template= Handlebars.compile(source); console.log(template(randomList)); 

控制台日志输出:

 <ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>