Question

我正在尝试使用车把遍历JSON数组中的每个项目。但是，我无法显示以下任何JSON数据。这是我的代码：

HTML

{{#each entries}}
  <div class="entry">
    <h1>{{day}}</h1>
    <div class="body">
      {{content}}
    </div>
  </div>
{{/each}}

...

<script>

var entries = {

  entries: [
    {
      day: "Day 1",
      content: "THIS is TEST CONTENT"
    },
    {
      day: "Day 2",
      content: "THIS is TEST CONTENT2"
    }
  ]
};

</script>

我尝试了相同的操作-http://tryhandlebarsjs.com/，但效果很好，这似乎是什么问题？谢谢。

Answer 1

尝试此实现流程：

HTML：

<h1>Handlebars JS Example</h1>
<script id="some-template" type="text/x-handlebars-template"> <table>
    <thead> 
        <th>Name</th> 
        <th>Job Title</th> 
        <th>Twitter</th> 
    </thead> 
    <tbody> 
        {{#users}} 
        <tr> 
            <td>{{person.firstName}}</td> 
            <td>{{jobTitle}}</td> 
            <td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td> 
        </tr> 
        {{/users}} 
    </tbody> 
</table> 
</script>

JAVASCRIPT CODE：

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

var data = { 
    users: [ { 
        person: {
            firstName: "Garry", 
            lastName: "Finch"
        },
        jobTitle: "Front End Technical Lead",
        twitter: "gazraa" 
    }, {
        person: {
            firstName: "Garry", 
            lastName: "Finch"
        }, 
        jobTitle: "Photographer",
        twitter: "photobasics"
    }, {
        person: {
            firstName: "Garry", 
            lastName: "Finch"
        }, 
        jobTitle: "LEGO Geek",
        twitter: "minifigures"
    } ]
}; 

$('body').append(template(data));

显示JSON数据的车把

1 个答案: