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 に答える