Javascript 如何在handlebar.js块中使用和设置自定义变量？

假设我有这个json

food = [
  {
    name: "banana",
    type: "fruit",
    color: "yellow"
  },
  {
    name: "apple",
    type: "fruit",
    color: red"
  },
  {
    name: "strawberry",
    type: "fruit",
    color: "red"
  },
  {
    name: "carrot",
    type: "vegetable",
    color: "orange"
  },
  {
    name: "chocolate",
    type: "dessert",
    color: "brown"
  }
]

我想在这样的表格中显示它：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
  {{#each food}
    {{#if lastType == "" or lastType != type}}
    <tr>
      <td colspan="2">{{type}}
    </tr>
    {{/if}}
    <tr>
      <td>{{name}}</td>
      <td>{{Color}}</td>
    </tr>
  {{/each}}
  </tbody>
</table>

<table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Color</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="2">fruit</td>
    </tr>
    <tr>
        <td>banana</td>
        <td>yellow</td>
    </tr>
    <tr>
        <td>apple</td>
        <td>red</td>
    </tr>
    <tr>
        <td>strawberry</td>
        <td>red</td>
    </tr>
    <tr>
        <td colspan="2">vegetable</td>
    </tr>
    <tr>
        <td>banana</td>
        <td>yellow</td>
    </tr>
    <tr>
        <td colspan="2">dessert</td>
    </tr>
    <tr>
        <td>chocolate</td>
        <td>brown</td>
    </tr>
    </tbody>
</table>

名称
颜色
{{{每种食物}
{{#如果lastType==“”或lastType！=type}
{{type}}
{{/if}
{{name}}
{{Color}}
{{/每个}}

但是我想为类型的属性每次添加一个新值时都添加另一个表行

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
  {{#each food}
    {{#if lastType == "" or lastType != type}}
    <tr>
      <td colspan="2">{{type}}
    </tr>
    {{/if}}
    <tr>
      <td>{{name}}</td>
      <td>{{Color}}</td>
    </tr>
  {{/each}}
  </tbody>
</table>

<table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Color</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="2">fruit</td>
    </tr>
    <tr>
        <td>banana</td>
        <td>yellow</td>
    </tr>
    <tr>
        <td>apple</td>
        <td>red</td>
    </tr>
    <tr>
        <td>strawberry</td>
        <td>red</td>
    </tr>
    <tr>
        <td colspan="2">vegetable</td>
    </tr>
    <tr>
        <td>banana</td>
        <td>yellow</td>
    </tr>
    <tr>
        <td colspan="2">dessert</td>
    </tr>
    <tr>
        <td>chocolate</td>
        <td>brown</td>
    </tr>
    </tbody>
</table>

名称
颜色
水果
香蕉
黄色的
苹果
红色
草莓
红色
蔬菜
香蕉
黄色的
甜点
巧克力
棕色的

---

我怎样才能做到这一点呢？

你的目标是将你的食物分组显示，并将其类型作为分组标题。我建议不要将进行分组的逻辑放在模板中，因为这样做会很麻烦。更好的解决方案——保持模板干净和清晰的方法——是在将数据发送到模板之前对其进行分组

理想的数据结构是按食品类型对食品进行索引。我们可以通过以下对象实现这一点：

{
    "fruit": [
        {
            "color": "yellow",
            "name": "banana",
            "type": "fruit"
        },
        {
            "color": "red",
            "name": "apple",
            "type": "fruit"
        }
    ],
    "vegetable": [
        {
            "color": "orange",
            "name": "carrot",
            "type": "vegetable"
        }
    ],
    "dessert": [
        {
            "color": "brown"
            "name": "chocolate",
            "type": "dessert"
        }
    ]
}

使用此数据结构，使用嵌套的

{{{{each}}

块在模板中获取分组将非常简单。（我假设我们已将对象命名为“foodsByType”）

---

我已经创建了一个供您参考的方法。

是的，这比我尝试的方法要简单得多。非常有魅力。谢谢！