Question

作为一个例子，我有以下数据集

  dataset = {header: ' header' } 

  dateline = { content: 'list of dates' } 

  monday = [
        { food:'teacake' , drink:'orange' } 
        ]

  tuesday = [
        { food:'eggs' , drink:'beer' } 
        ]    

  dateline.monday = monday
  dateline.tuesday = tuesday
  dataset.dateline = dateline

我想要做的是使用把手来运行这些日子，我想这可以用孩子来完成。

  <script id="mwl707" type="text/x-handlebars-template">        
  {{#each dateline.children }}
    <span>{{food}} : {{drink}}</span>
  {{/each}}
  </script>

但我不能让它工作，请帮忙吗？ JSfiddle

Answer 1

我更新了你的小提琴，所以它有效：http://jsfiddle.net/AgCBb/1/

你不应该在[]括号中再次将对象包裹在星期一和星期二，这是一个不必要的额外级别来解析。只需在父对象中创建一个数组Array，因为数组在Handlebars中更容易解析。

dataset = {header: ' header' } //
dateline = { content: 'list of dates' } 
monday  =  { "food":"teacake" , "drink":"orange" }
tuesday = { "food":"eggs" , "drink":"beer" }

dateline.days = []
dateline.days.push(monday)
dateline.days.push(tuesday)

然后你可以像这样解析它：

{{#dateline.days }}
  <span>{{food}} : {{drink}}</span>
{{/dateline.days}}

还要确保将有效的JSON传递给模板。如果不确定您可以使用http://jsonlint.com/

检查您的JSON

Answer 2

Handlebars不提供迭代对象属性的内置方法。见Handlebars/Mustache - Is there a built in way to loop through the properties of an object?。您可以改为以Handlebars支持的方式格式化数据，例如普通数组。我不会在这里复制代码，它在链接的帖子中。

此外，您不应将<script>标记放在小提琴的javascript平面内。请改用External Resources部分。

迭代Handlebars中的Child元素

2 个答案: