javascript - knockout ；绑定(bind)值未更新或 ko.compulated() 未更新

Question

我有以下对象。

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

它绑定(bind)到以下元素。

<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]);

View 模型的定义方式也存在一些问题。如果将其定义为对象文字，则需要在每个属性之间放置逗号。此外，计算的可观察量尝试立即评估自身，并且在关闭之前它无法访问该对象文字的属性。

以下是经过一些更改的更新示例:http://jsfiddle.net/rniemeyer/sq263/