遍歷兩個陣列在時間而不斷裂綁定

我有接受值，並且具有相同長度的陣列爲每個值驗證錯誤串陣列的組成部分。我想顯示每個值和錯誤對的輸入表單字段列表。我試圖創建一個計算屬性是這樣的：不被推回到源values陣列（例如，經由{{input value=valuesAndErrors.value}}）在valuesAndErrors到值進行遍歷兩個陣列在時間而不斷裂綁定

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('[email protected]', '[email protected]') 
});

但不幸的是變化。同時迭代values和errors陣列的正確方法是什麼，而不會破壞這樣的綁定？

我目前使用Ember 1.9。

來源

2015-01-16 pmdarrow

我不知道，如果你從'values'和'errors'談論的實際值，或者如果你在談論的計算性能沒有更新。如果你正在談論第一個，字符串是按值傳遞的，所以你需要將它們包裝在一個對象中，以便在兩個數組之間共享它們。如果你在談論第二個問題，那麼你的屬性可能需要觀察'values。[]'和'errors。[]'以便看到值和錯誤的改變。 – Kingpin2k

我沒有計算出的屬性問題沒有更新 - 我遇到了'valuesAndErrors'中值的實際更改問題（通過'{{input value = valuesAndErrors.value}}'）沒有被推回到源'值'數組。這是否更有意義？ – pmdarrow

可以修改的值和錯誤陣列（我只說，導致該是唯一的辦法;）） – Kingpin2k

爲什麼在控制器中沒有爲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('[email protected]', '[email protected]') 
});

而且你的組件模板（你甚至不需要任何組件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

UPDATE

enter image description here

來源

2015-01-20 15:22:02 Kalman

不幸的是，這打破了雙向綁定。如果我在任何'{{input value = item.value}}'輸入中進行了更改，則不會將其返回到「原始」值列表。 – pmdarrow

您是否嘗試編輯jsbin中「輸出」選項卡中的值？以上是我在編輯時看到的 – Kalman

是的 - 綁定被保存在組合的'valuesAndErrors'數組中，但綁定返回原來的'values'和'errors'數組。我更新了你的JSBin來演示這個問題：http://emberjs.jsbin.com/pozoxaretu/1/edit?html,js,output。 – pmdarrow

遍歷兩個陣列在時間而不斷裂綁定

回答

相關問題