ember.js - 一次迭代两个数组而不破坏绑定(bind)

Question

我有一个组件，它接受一个值数组和相同长度的数组，每个值都有一个验证错误字符串。我想显示一个表单字段列表，其中包含每个值和错误对的输入。我试过创建一个这样的计算属性:

var myComponent = Ember.Component.extend({
  //values: <provided array of input values>
  //errors: <provided array of error strings>
  valuesAndErrors: function() {
    var combined = [];
    for (var i = 0; i < values.length; i++) {
      combined.pushObject({
        value: this.get('values')[i],
        error: this.get('errors')[i]
      });
    }
    return combined;
  }.property('values.@each', 'errors.@each')
});

但不幸的是， valuesAndErrors 中的值发生了变化。 (例如通过 {{input value=valuesAndErrors.value}} )不会被推回源 values大批。迭代 values 的正确方法是什么？和 errors数组同时不破坏这样的绑定(bind)？

我目前正在使用 Ember 1.9。

Answer 1

而不是为 values 传入单独的数组和 errors ，为什么不在 Controller 中有一个计算属性，将两者结合起来，然后将其传递给组件？

因此，您的 Controller 可能看起来像这样:

App.ApplicationController = Ember.Controller.extend({
  values: function(){
    return ["one", "two", "three"];
  }.property(),

  errors: function(){
    return ["oneError", "twoError", "threeError"];
  }.property(),

  valuesAndErrors: function() {
    var combined = [];

    var values = this.get('values');
    var errors = this.get('errors');

    values.forEach(function(value, index){
      combined.pushObject({
        value: value,
        error: errors[index]
      });      
    });

    return combined;
  }.property('values.@each', 'errors.@each')
});

还有你的组件模板(你甚至不需要任何组件 JS 来工作):

<script type="text/x-handlebars" id='components/value-error'>
  <h2>Inside of Component</h2>
    {{#each item in valuesAndErrors }}
      {{ input value=item.value }} - {{ input value=item.error }}<p/>
    {{/each}}
</script>

工作示例 here

更新