Question

我正在使用带有把手的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。当我尝试保存此代码时，我收到一个语法错误，即没有与open标记匹配的close标记。如何动态创建和没有语法错误？

我正在使用ember CLI版本2.9.1。

Answer 1

当您运行您提供的代码段时，您很可能会遇到指示name := "BloomFilters" version := "1.0" scalaVersion := "2.11.6" libraryDependencies += "org.apache.spark" %% "spark-sql" % "2.2.0" libraryDependencies += "joda-time" % "joda-time" % "2.9.3" assemblyMergeStrategy in assembly := { case PathList("META-INF", xs @ _*) => (xs map {_.toLowerCase}) match { case "services" :: xs => MergeStrategy.first case _ => MergeStrategy.discard } case x => MergeStrategy.first }的错误，这是因为Error while processing route: index Unclosed element tr (on line 8). Error: Unclosed element tr (on line 8).无法知道呈现是否会生成正确的ember-template-compiler页面作为渲染的结果。如果HTML数组不能被3整除，该怎么办？我们将在运行时中收到错误。为了防止这种情况; items会引发错误，指出未公开的ember-template-compiler标记。

因此;可以做些什么来防止这种情况？您可以在js文件中创建一个计算属性，该属性只返回所需的行数，如下所示：

tr

之后，您只需使用ember-composable-helpers提供的rowCount: Ember.computed('items.length', function() { return this.get('items.length')/3; })帮助，并在模板中执行以下操作：

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

我为你准备了以下twiddle，它包含了我上面已经解释过的内容。通过这样做;你会避免你得到的export function getItemAtArrayIndex(params/*, hash*/) { let array = params[0]; let index = params[1]; let rowIndex = params[2]; return array[index+rowIndex*3]; }错误;因为标签将明确关闭，模板编译器不会抱怨。

把手动态表行

1 个答案: