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/

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

1 个答案: