KnockoutJS;綁定值不更新或ko.computed（）未更新

Question

我有以下對象。

var q = { 
    availableModels: ko.observableArray(); 
    selectedModel: ko.observable(); 
    displayModel: function(item) { return item.text; } 
    image: ko.computed(function() { 
     return q.selectedModel().image; 
    }); 
} 

這勢必以下元素。

<select data-bind="options: availableModels, value: selectedModel, optionsText: displayModel, optionsCaption: 'Choose a Model'"></select> 

和一個圖像。

<img data-bind="attr: { src: image }"> 

我將一些對象推入availableModels。

q.availableModels.push({ index: 0, text: 'castis0', image: 'castis0.jpg'}); 
q.availableModels.push({ index: 1, text: 'castis1', image: 'castis1.jpg'}); 

我然後設置selectedModel

q.selectedModel({ index: 1, text: 'castis2', image: 'castis2.jpg' }); 

html元素確實包含了我推入availableModels但當前選擇的元素沒有被設置selectedModel改變的對象。

如果我應用更改，它確實有效。

q.selectedModel = ko.computed(function() { 
    for(var i = 0; i < q.availableModels().length; i++) { 
     var data = q.availableModels()[i]; 
     if (data.index == 1) { 
      return data; 
     } 
    } 
}) 

但圖像的src沒有改變。

我未意識到了什麼，我需要改變，

Answer 1

這裏會發生什麼事是，你是不是在處理同一個對象的引用。下面是一個示例：

var a = { name: "Bob" }; 
var b = { name: "Bob" }; 
var c = b; 

alert(a === b); //false 
alert(b === c); //true 

所以，你的情況，你需要從你的陣列狀設置selectedModel等於實際的對象：

q.selectedModel(q.availableModels()[1]); 

沒有與方式的幾個問題您的視圖模型也被定義。如果您將其定義爲對象字面值，則需要在每個屬性之間放置逗號。此外，計算的observable會立即嘗試自行評估，直到它關閉後才能訪問該對象文本的屬性。

這裏是一個更新的樣本有一些變化：http://jsfiddle.net/rniemeyer/sq263/