把手动态 table 行

Question

我正在使用 Ember 和 Handlebars。我有一种情况，我需要在数组的 3 次迭代后动态创建新的 table 行。

<table>
{{#each items as |item itemIndex|}}
    {{#if (compare (mod itemIndex 3) '===' 0)}}<tr>{{/if}}
        <td>{{item.id}}</td>  
    {{#if (compare (mod itemIndex 3) '===' 2)}}</tr>{{/if}}
{{/each}}
</table>

为举例起见，请假设 items 数组中始终存在因子 3。当我尝试保存此代码时，出现语法错误，指出没有与打开标签匹配的关闭标签。如何动态创建 and 而不会出现语法错误？

我正在使用 ember CLI 版本 2.9.1。

Answer 1

当您运行您提供的代码片段时，您很可能会遇到一个错误，指示 Error while processing route: index Unclosed element tr (on line 8). Error: Unclosed element tr (on line 8). 这是因为 ember-template-compiler 不知道渲染是否会产生正确的结果HTML 页面作为渲染结果。如果 items 数组不能被 3 整除怎么办；我们将在运行时间得到一个错误。为了防止这种情况； ember-template-compiler 抛出错误指示未关闭的 tr 标签。

所以；可以做些什么来防止这种情况发生？您可以在您的 js 文件中创建一个计算的属性，它只是 returns 所需的行数，如下所示：

rowCount: Ember.computed('items.length', function() {
    return this.get('items.length')/3;
})

之后您可以简单地使用 ember-composable-helpers 提供的 range 帮助程序并在您的模板中执行以下操作：

<table>
    {{#each (range 0 rowCount) as |rowIndex|}}
    <tr>
    {{#each (range 0 3) as |columnIndex|}}
        {{! `number` will go from 0 to 2}}
      <td>
        {{get (get-item-at-array-index items columnIndex rowIndex) 'id'}}
      </td>
        {{/each}}
    </tr>
    {{/each}}
</table>

上面提供的模板代码片段包含一个名为 get-item-at-array-index 的助手，它只是在所需的索引位置找到相关项目，它应该有一个简单的代码如下：

export function getItemAtArrayIndex(params/*, hash*/) {
  let array = params[0];
  let index = params[1];
  let rowIndex = params[2];

  return array[index+rowIndex*3];
}

我已经为您准备了以下 twiddle，总结了我上面已经解释的内容。通过这样做;您将避免出现 Unclosed element tr 错误；因为标签将显式关闭并且模板编译器不会抱怨。

把手动态 table 行

handlebars dynamic table row

handlebars.js

ember.js

express-handlebars