0

我正在使用带有把手的 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。

4

1 回答 1

3

当您运行您提供的代码片段时，您很可能会遇到一个错误，指出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-helpersrange提供的帮助程序，并在您的模板中执行以下操作：

<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];
}

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

于 2017-12-14T09:15:13.197 回答