Question

假设我有以下控制器

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

在我的手柄中，我可以循环容器数组中的每个值，但是如何在每个循环中动态填充每个attr

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

Answer 1

Handlebars无法进行计算，{{#each}}一次只能遍历单个数组。因此，您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' },
]

然后直接在container上循环，而不必创建中间数据表示。

在车把emberjs中的每个循环内动态输出表达式

1 个答案: