如何使用handlebars#每个调用对象与对象数组?

Question

那么我有一个对象的结构是这样的:

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

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

Answer 1

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

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

第一个示例构建菜单，想象p1保存URL,p2保存链接的文本。每个都进入<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>

在表中:

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>