Question

我正在尝试使用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中显示为空白。有人可以帮帮我吗？

Answer 1

例如，如果您的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 });
});

这将渲染所有的冰淇淋。对于您的示例，它将仅呈现一个。

此示例摘自我的一个演示。

如何使用把手呈现JSON数组

1 个答案: