Question

我的Ember.js / Handlebars模板中新增了一段代码，如下所示：

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

day.today来自填充的对象：

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

如果今天今天，那么我希望（在小日历中我画画）可以突出显示该日期。

但是，在尝试运行时，会发出以下错误：

[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)

此错误是否来自预渲染模板？当然在运行时（＆＃34; rendertime＆＃34;）只会有<td>或<td class="active">，但绝不会两者兼而有。

如何解决此问题？

Answer 1

自Ember v1.11起，您可以将inline-if helper与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}}

Answer 2

要解决此问题，请在条件分支中包含整个标记，以便HTMLBars可以“看到”您关闭标记，而不是将其挂起。像这样：

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

这似乎有很多重复，但我发现在修改布局时通常会减少错误。它也可能表示您可能希望将其提取到组件中，并使用内联 - 如果Daniel在其他答案中提及，或者自己创建帮助。

未公开的元素＆＃39;＆＃39;在Ember.js 1.12.0中使用if / else条件帮助器

2 个答案: