Ember.js 1.12.0 中使用 if/else 条件助手的未闭合元素“<td>”

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)

此错误是否来自预渲染 模板？当然在运行时间 ("rendertime") 只会有 <td> 或 <td class="active">，但不会两者都存在。

我该如何解决这个问题？

Answer 1

从 Ember v1.11 开始，您可以使用 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}}

Answer 2

要解决这个问题，请将整个标签包含在条件分支中，这样 HTMLBars 就可以 "see" 您关闭标签，而不是让它悬空。像这样：

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

这似乎重复了很多，但我发现在以后修改布局时，它通常会导致更少的错误。这也可能表明您可能希望将其提取到一个组件中，或者使用 inline-if Daniel 在另一个答案中提到，或者创建您自己的助手。

Ember.js 1.12.0 中使用 if/else 条件助手的未闭合元素“<td>”

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

html

javascript

handlebars.js

ember.js

htmlbars