如何在Handlebars.js块中使用和设置自定义变量?

问题描述

所以可以说我有这个json

food = [
  {
    name: "banana",type: "fruit",color: "yellow"
  },{
    name: "apple",color: red"
  },{
    name: "strawberry",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>

但是我想每次在type属性的值有了新值时添加另一个表行。所以基本上,final表看起来像这样:

<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>

我如何实现这样的目标?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)