Question

我很难理解如何使用带有jQuery的handlebars.js来处理顶级字典数组

我的数据对象不包含带有命名数组对象的字典（这是大多数在线处理的例子）。我的数据对象如下所示：

[
  {
    "Type": "TopLevel",
    "Identifier": "123456789IL",
    "FullName": "Smith, John H.",
    "CurrentLocation": "In Building"
  },
  {
    "Type": "TopLevel",
    "Identifier": "123456789OL",
    "FullName": "Doe, Jane M.",
    "CurrentLocation": "Parking Lot"
  }
]

这是一个工作的jsfiddle（使用指定的数组对象（我没有）和一个与我的实际数据对象不兼容的jsfiddle（不起作用）。

http://jsfiddle.net/eljaywilson/ZhF5h/ - 有效，但不是我的数据对象的外观

http://jsfiddle.net/eljaywilson/ZhF5h/1/ - 没有工作

Answer 1

您的模板中有错误 - 您必须将[/ users]更改为{{/。}}，如下所示：

    <tbody> 
        {{#.}}
        <tr> 
            <td>{{Type}}</td> 
            <td>{{FullName}}</td> 
            <td>{{CurrentLocation}}</td> 
            <td>{{Identifier}}</td> 
        </tr> 
        {{/.}}
    </tbody>

Answer 2

这可以解决您的问题：

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 

var data =  [
  {
    "Type": "TopLevel",
    "Identifier": "123456789IL",
    "FullName": "Smith, John H.",
    "CurrentLocation": "In Building"
  },
  {
    "Type": "TopLevel",
    "Identifier": "123456789OL",
    "FullName": "Doe, Jane M.",
    "CurrentLocation": "Parking Lot"
  }
]
; 

Handlebars.registerHelper('fullName', function(person) {
  return person.firstName + " " + person.lastName;
});

$('#myDiv').append(template({ users: data }));

<强>解释

data是一个数组，您只需在传递给模板之前将其包装。

修正了jsfiddle：http://jsfiddle.net/akhikhl/bTzf3/1/

Handlebars.js模板与顶级数组

2 个答案: