I have these two contexts:
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
}
Now I'm trying to render each of businessHours.days
into a table with each row containing the day's name from dow
in one cell and the hours in the other. I tried doing it like this
{{#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}}
But it doesn't render the day's name. I'm not converting businessHours.days
into a plain object because an object's properties are not stored in fixed order.
This can be resolved using Handlebar's lookup
helper.
{{lookup @root.dow @key}}
See working snippet below.
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>