Search code examples
javascripthtmlember.jshandlebars.jshtmlbars

Unclosed element '<td>' in Ember.js 1.12.0 using if/else conditional helper


I have a newly-added section of code in my Ember.js/Handlebars template that looks like:

      {{#each day in week.days}}
        {{#if day.today}}
        <td class="active">
        {{else}}
        <td>
        {{/if}}
          <h5><b>{{day.mileage}}</b></h5>
          <br/>
          {{day.dayStr}}
        </td>
      {{/each}}

Where the day.today comes from an object populated like:

{
    ...
    today: dateEquals(new Date(), currentDate)
}

And I would like (in the little calendar I'm drawing) for that date to be highlighted if it's today.

But, when attempting to run this, the following error is emitted:

[18191:0927/082737:INFO:CONSOLE(12363)] "Uncaught Error: Unclosed element `td` (on line 14).", source: file:///path/to/project/js/libs/ember-template-compiler-1.12.0.js (12363)

Is this error coming from the pre-rendered template? Surely at runtime ("rendertime") there will only be either <td> or <td class="active">, but never both.

How can I resolve this issue?


Solution

  • As of Ember v1.11 you can use inline-if helper in combination with bound attribute syntax:

    {{#each day in week.days}}
      <td class="{{if day.today 'active'}}">
        <h5><b>{{day.mileage}}</b></h5>
        <br/>
        {{day.dayStr}}
      </td>
    {{/each}}