我正在尝试使用Handlebars.js渲染一个重复的UI组件。
R = decomposition(K)\E
下面是从API服务器返回的JSON数据。
<div class="container-fluid article-container">
{{#each this}}
<h1>{{header}}</h1>
<h1>{{url}}</h1>
<h1>{{body}}</h1>
{{/each}}
</div>
当浏览器呈现页面时,H1标签在UI中显示为空白。有人可以帮帮我吗?
答案 0 :(得分:2)
例如,如果您的api数据是这样返回的:
var icecreams = [
{ name: "vanilla", price: 10, awesomeness: 3 },
{ name: "chocolate", price: 4, awesomeness: 8 },
{ name: "banana", price: 1, awesomeness: 1 },
{ name: "greentea", price: 5, awesomeness: 7 },
{ name: "jawbreakers", price: 6, awesomeness: 2 },
{ name: "vanilla", price: 10, awesomeness: 3 }
];
那么您的handlebar
文件将是
{{#each ics}}
<p>Flavor: {{name}}</p>
<p>Price: ${{price}}</p>
<p>Awesomeness: {{awesomeness}}</p>
<hr>
{{/each}}
快速路线:
app.get("/icecreams", function(req, res) {
res.render("ics", { ics: icecreams });
});
这将渲染所有的冰淇淋。对于您的示例,它将仅呈现一个。
此示例摘自我的一个演示。