在不破坏绑定的情况下迭代两个数组

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数组的正确方法是什么？

我目前正在使用Ember 1.9。

Answer 1

为什么在控制器中没有为values和errors传递一个计算属性，而不是将它们组合在一起，然后将其传递给组件？

所以，你的控制器可能看起来像这样：

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

<强>更新