javascript - 动态输出handlebar emberjs中每个循环内的表达式

Question

假设我有以下 Controller

App.SomeController = Ember.Controller.extend({
  container: Ember.A(['one','two','three']),
  attrOne: 'Attribute One',
  attrTwo: 'Attribute Two',
  attrThree: 'Attribute Three'
});

在我的 Handlebars 中，我可以循环容器数组中的每个值，但如何动态填充每个循环中的每个属性

{{#each data in container}}
  {{data}} // one, two, three
  {{???}} // {{attrOne}} {{attrTwo}} {{attrThree}} ??? How ???
{{/each}}

Answer 1

Handlebars 无法进行计算，并且 {{#each}} 一次只能循环一个数组。因此，您正在访问的数组中的元素必须包含您想要输出的所有数据。因此，您可以采用定义所需数据的计算属性的方法，我们将其称为loopData。问题是数组中的键和相应的属性字符串之间的唯一联系是属性的名称，其中前缀是键。所以:

// in controller
loopData: function() {
  return this.get('container') .        // take container and
    map(function(key) {                 // create array which for each key
      var attr = this.get('attr' +      // gets property name starting with 'attr'
        key.capitalize();               // and ending in the key
      return { key: key, attr: attr };  // and returns little object with key and attr
  });
}.property('container.@each')

这将创建一个看起来像这样的数组

[{ key: 'one', attr: 'Attribute One' }, ...]

您可以在模板中循环:

{{#each data in loopData}}
    {{data.key}} // one, two, three
    {{data.attribute}}
{{/each}}    

但是，这工作量太大，而且可能不是构建数据的好方法。您最好直接将基本属性定义为

container: [
    { key: 'one', attr: 'Attribute One' },
    { key: 'two', attr: 'Attribute Two' },
    { key: 'three', attr: 'Attribute Three' },
]

然后直接循环容器，而无需创建中间数据表示。