我正在使用带把手的 Ember。我有一种情况，我需要在数组的 3 次迭代后动态创建新的表行。
<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。
【问题讨论】：
标签： ember.js handlebars.js express-handlebars
当您运行您提供的代码 sn -p 时，您很可能会遇到指示 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 文件中创建一个计算属性，该属性仅返回所需的行数，如下所示：
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>
上面提供的模板代码 sn-p 包含一个名为 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 错误；因为标签会显式关闭，模板编译器不会报错。
【讨论】：