0

我有以下对象。

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 没有改变。

我不知道我需要改变什么，

4

1 回答 1

2

这里发生的是您没有处理对同一对象的引用。这是一个示例：

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/

于 2012-08-16T17:32:37.580 回答