node.jshandlebars.jstemplating-engine

How do I get an element from other array using current context's @key in Handlebars?


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.


Solution

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