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's lookup helper解决此问题。

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

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

1 个答案: