node.js - 如何使用 Handlebars 中当前上下文的 @key 从其他数组中获取元素？

Question

我有这两种情况：

dow = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

businessHours = {
    days: [
        ["08:00", "22:00"],
        ["08:00", "22:00"],
        ["08:00", "22:00"],
        false,
        ["08:00", "22:00"],
        false,
        false
    ],
    openOnHolidays: false
}

现在我正在尝试将每一个渲染businessHours.days成一个表格，每一行包含一个单元格中的日期名称和dow另一个单元格中的小时数。我试着这样做

{{#hours}}
<table>{{#each days}}
<tr>
    <td>{{@root.dow.[@key]}}</td> <!-- This is the line I'm talking about ->
    <td>{{#if this}}{{this.[0]}} - {{this.[1]}}{{/if}}{{#unless this}}Closed{{/unless}}</td>
</tr>
{{/each}}</table>
{{#unless openOnHolidays}}Closed on holidays{{/unless}}
{{/hours}}

但它不会呈现当天的名称。我没有转换businessHours.days成普通对象，因为对象的属性不是按固定顺序存储的。

Answer 1

这可以使用Handlebar 的lookuphelper解决。

{{lookup @root.dow @key}}

请参阅下面的工作片段。

var data = {
  dow: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  hours: {
    days: [
      ["08:00", "22:00"],
      ["08:00", "22:00"],
      ["08:00", "22:00"],
      false,
      ["08:00", "22:00"],
      false,
      false
    ],
    openOnHolidays: false
  }
};

var source = $('#entry-template').html();
var template = Handlebars.compile(source)(data);

$('body').html(template)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>

<script id="entry-template" type="text/x-handlebars-template">
{{#hours}}
<table>
<thead>
  <tr>
    <th>Day</th>
    <th>Hours</th>
  </tr>
</thead>
<tbody>
{{#each days}}
<tr>
    <td>{{lookup @root.dow @key}}</td>
    <td>{{#if this}}{{this.[0]}} - {{this.[1]}}{{/if}}{{#unless this}}Closed{{/unless}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{#unless openOnHolidays}}Closed on holidays{{/unless}}
{{/hours}}
</script>