Javascript 带有顶级数组的Handbars.js模板

我很难理解如何使用handlebar.js和jQuery处理顶级字典数组

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

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

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

这里是一个工作的JSFIDLE（使用命名的数组对象（我没有）和一个非工作的JSFIDLE（使用我的实际数据对象）（不工作）

-有效，但不是我的数据对象的外观

---

-无需工作

这将解决您的问题：

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 }));

说明：

数据是一个数组，您只需在传递到模板之前对其进行包装

---

修复了JSFIDLE的问题：

这应该可以解决您的问题：

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 }));

说明：

数据是一个数组，您只需在传递到模板之前对其进行包装

---

修复了JSFIDLE的问题：

这应该可以解决您的问题：

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 }));

说明：

数据是一个数组，您只需在传递到模板之前对其进行包装

---

修复了JSFIDLE的问题：

这应该可以解决您的问题：

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 }));

说明：

数据是一个数组，您只需在传递到模板之前对其进行包装

---

修复了JSFIDLE的问题：

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

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

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

{{#.}}
{{Type}}
{{FullName}}
{{CurrentLocation}}
{{标识符}}
{{/.}}

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

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

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

{{#.}}
{{Type}}
{{FullName}}
{{CurrentLocation}}
{{标识符}}
{{/.}}

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

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

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

{{#.}}
{{Type}}
{{FullName}}
{{CurrentLocation}}
{{标识符}}
{{/.}}

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

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

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

{{#.}}
{{Type}}
{{FullName}}
{{CurrentLocation}}
{{标识符}}
{{/.}}

Doh！真不敢相信我错过了，我得从复制和粘贴错误中吸取教训：）谢谢！我很高兴做这种事的不仅仅是我自己啊！真不敢相信我错过了，我得从我的复制和粘贴错误中吸取教训：）谢谢！我很高兴做这种事的不仅仅是我自己啊！真不敢相信我错过了，我得从我的复制和粘贴错误中吸取教训：）谢谢！我很高兴做这种事的不仅仅是我自己啊！真不敢相信我错过了，我得从我的复制和粘贴错误中吸取教训：）谢谢！我很高兴做这种事的不仅仅是我自己