如何使用 handlebars #each 调用带有对象数组的对象？

Question

所以我有一个结构如下的对象：

menu = {
  classic: [
    {p1: ..., p2: ...}, {p1: ..., p2: ...}
  ],
  classic2: : [
    {p1: ..., p2: ...}, {p1: ..., p2: ...}
  ]
}

一个对象，其中每个值都是一个对象数组。例如，如何使用 handlebars #each 调用到达 menu.classic[0].p1？我可以嵌套多个 #each 调用来迭代每个对象值中的每个数组索引吗？

Answer 1

使用嵌套的 {{#each}} 个块。

在这里，您将看到 classic 和 classic2 渲染到 <ul>s 中，相应的 p1 属性使用这种方法渲染到 <li>s 中。

第一个示例构建菜单，假设 p1 包含 URL，p2 包含 link 的文本。每个都进入 <a> 标签 <li>.

let menu = {
  classic: [
    {p1: 'URL1', p2: 'classic link1'}, {p1: 'URL2', p2: 'classic link2'}
  ],
  classic2:  [
    {p1: 'URL3', p2: 'classic2 link1'}, {p1: 'URL4', p2: 'classic2 link2'}
  ]
};

const ul = `
<div>
  {{#each this}}
  <ul class="menu">
    {{#each this}}
    <li><a href="{{this.p1}}">{{this.p2}}</a></li>
    {{/each}}
  </ul>
  {{/each}}
</div>`;

let template = Handlebars.compile(ul);
console.log(template(menu));

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

在 table:

let menu = {
  classic: [
    {p1: 'classic test', p2: 'classic test'}, {p1: 'classic test', p2: 'classic test'}
  ],
  classic2:  [
    {p1: 'classic2 test', p2: 'classic2 test'}, {p1: 'classic2 test', p2: 'classic2 test'}
  ]
};

const table = `
  {{#each this}}
<table>
  {{#each this}}
  <tr>
    {{#each this}}
    <td>{{this}}</td>
    {{/each}}
  </tr>
  {{/each}}
</table>
{{/each}}`;

let template = Handlebars.compile(table);
console.log(template(menu));

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

如何使用 handlebars #each 调用带有对象数组的对象？

How do I use an handlebars #each call for an object with arrays of objects?

html

javascript

handlebars.js

express-handlebars