车把动态表行

运行提供的代码段时,很可能会遇到以下错误: 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模板编译器 引发一个错误,指示未关闭 tr 标签

所以如何防止这种情况发生?您可以在js文件中创建一个计算属性,该属性只返回所需的行数,如下所示:

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

之后,您可以简单地利用 range 助手提供人 ember-composable-helpers 并在模板中执行以下操作:

<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 您得到的错误;因为标记将显式关闭,模板编译器不会抱怨。