非封闭元素'<td>'在Ember.js 1.12.0中使用if/else条件帮助器

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

本文关键字：if else 条件 帮助 js 元素 td Ember      更新时间：2023-09-26

我在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">，但永远不会同时存在。

如何解决这个问题?

从Ember v1.11开始，您可以将内联if helper与绑定属性语法结合使用:

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

要解决这个问题，将整个标签包含在条件分支中，这样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}}

这似乎有很多重复，但我发现当修改布局时，它通常会导致更少的bug。这也可能表明您可能希望将其提取到一个组件中，并且要么使用Daniel在另一个答案中提到的内联方式，要么创建自己的帮助器。

相关文章：