Handlebars中的JSON对象数组

Question

我需要使用Handlebars模板处理一个JSON对象数组（通过Chrome控制台）[object，object，object，object]，其中每个对象由以下属性组成：姓名，姓氏等。

我已经了解到，在Handlebars中无法放置对象数组，但我们必须创建一个包含数组中所有对象的所有属性的唯一对象。 请问是否有人可以建议一个函数来创建它？

- Stefano Maglione

Answer 1

当调用模板时，您可以将数组设置为包装对象的属性。

例如，使用objects作为包装属性。

var an_array = [
    {name: "My name"},
    {name: "Another name"}
];

var source   = /* a template source*/;
var template = Handlebars.compile(source);
var wrapper  = {objects: an_array};

console.log(template(wrapper));

您的模板可以按如下方式使用此属性：

<ul>
    {{#each objects}}
        <li>{{name}}</li>
    {{/each}}
</ul>

这是一个演示：http://jsfiddle.net/YuvNY/1/

var an_array=[
    {name:"My name"},
    {name:"Another name"},    
];

var source   = $("#src").html();
var template = Handlebars.compile(source);
$("body").append( template({objects:an_array}) );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>

<script type='text/template' id='src'>
<ul>
  {{#each objects}}
      <li>{{name}}</li>
  {{/each}}
</ul>    
</script>

或者您可以直接将数组传递到模板中，并使用上下文设置为。 (一个点) 调用each助手函数。

---

var template = Handlebars.compile(source);
console.log(template(an_array));

<ul>
    {{#each .}}
        <li>{{name}}</li>
    {{/each}}
</ul>

http://jsfiddle.net/nikoshr/YuvNY/32/

var an_array=[
    {name:"My name"},
    {name:"Another name"},    
];

var source   = $("#src").html();
var template = Handlebars.compile(source);
$("body").append( template(an_array) );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>

<script type='text/template' id='src'>
<ul>
  {{#each .}}
      <li>{{name}}</li>
  {{/each}}
</ul>    
</script>

- nikoshr

---

@StefanoMaglione 你能设置一个fiddle来查看出了什么问题吗？我的可以帮助你启动。 - nikoshr

使用包装对象可以使您的模板具有更可读的上下文。比如，假设您正在处理一个用户数组：{{#each users}}比{{#each .}}更容易阅读。 - seePatCode

非常顺利！非常感谢！ - Dunith Dhanushka

该死！我花了几个小时来尝试我的外部JSON和HTML模板；你的“.”（点）帮了我大忙，因为它是JSON文件中的简单数组。非常感谢！ - Adesh M

啊，我一直无法弄清楚如何显示我的对象数组，花了一段时间才找到这个答案。这解决了我的问题，也教会了我一些东西，谢谢@nikoshr。 - contractorwolf