在Ember.js 2.13的HBS模板中声明并递增变量替代硬编码值

问题原因 #

你尝试用{{#let}}定义变量并递增的方式行不通，是因为Ember 2.13的{{#let}}仅用于创建不可变的块级作用域变量，模板本身不支持声明可修改的变量——Ember模板是声明式的，可变状态的处理应该放在组件/控制器中，而非模板内。

最优解决方案：直接遍历数组 #

既然你需要处理myArray中的元素，最简洁的方式是先用{{#each}}遍历整个数组，再对每个元素用{{#each-in}}遍历其键值对，完全避免硬编码索引：

{{#each myArray as |arrayItem|}}
  {{#each-in arrayItem as |key value|}}
    <th>{{value}}</th>
  {{/each-in}}
{{/each}}

如果只需要处理数组的前两个元素（对应你原代码中的myArray.[0]和myArray.[1]），可以在控制器中定义一个计算属性来过滤数据，保持模板的简洁性：

控制器代码（app/controllers/你的控制器名.js）

import Ember from 'ember';

export default Ember.Controller.extend({
  // 过滤出myArray的前两个元素
  filteredMyArray: Ember.computed('myArray', function() {
    const array = this.get('myArray');
    return array ? array.slice(0, 2) : [];
  })
});

模板代码

{{#each filteredMyArray as |arrayItem|}}
  {{#each-in arrayItem as |key value|}}
    <th>{{value}}</th>
  {{/each-in}}
{{/each}}

如需追踪索引值 #

如果业务逻辑需要用到元素的索引，可以直接从{{#each}}中获取索引变量：

{{#each myArray as |arrayItem index|}}
  <!-- 这里可以直接使用index变量，比如判断是否是前两个元素 -->
  {{#if (or (eq index 0) (eq index 1))}}
    {{#each-in arrayItem as |key value|}}
      <th>{{value}}</th>
    {{/each-in}}
  {{/if}}
{{/each}}

注意：Ember 2.13中需要安装ember-truth-helpers插件才能使用eq、or这类逻辑助手。

内容的提问来源于stack exchange，提问作者user21299219