我想每个项目迭代中使用车把上的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/它完美地工作,似乎是什么问题?谢谢。
试试这个执行这个流程:
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代码:
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));