2

ノックアウト js を使用して遅延読み込み選択を作成しようとしています。ノックアウトのおかげで、オンデマンドでデータを読み込んで UI を更新するのは簡単です。ただし、データがロードされると、正しいアイテムを設定することに問題があります。

jsFiddle の例はこちら

少し掘り下げた後、ノックアウトはモデルをオプションに一致させたいため、値をオーバーライドするようです。knockout-2.2.1.debug.js の「ensureDropdownSelectionIsConsistentWithModelValue」を参照してください。

これを行う時点でオプションがないため、モデル値を0で上書きするため、これは私にとって問題です。

私はノックアウトにかなり慣れていないので、私はこれに間違ったアプローチをしていると思います...誰かがこれを達成しましたか? または提案するより良いアプローチがありますか？

Ryan のブログ記事Lazy Loading an Observable in KnockoutJSを読みましたが、私の問題を解決する彼のアプローチを活用する方法がわかりません。

助けてくれてありがとう:)

ステ。

コードサンプル:

HTML:

<select data-bind="options: $data.choice.options, optionsText: 'text', optionsValue: 'value', value: $data.choice"></select>

JS:

var optionsProvider = (function () {
"use strict";
var self = {};
//container for options data, a sort of dictionary of option arrays.
self.options = {};

self.init = function (optionData) {
    //pre-populate any provided options data here...
};

self.get = function(name) {
    if (!self.options[name]) {
        self.options[name] = ko.observable([]);

        //ajax request for options
        //populate self.options[name] with options upon return
        //dummy this with below for example.
        setTimeout(function() { 
            self.options[name]([
                { text : "option1", value : 1 },
                { text : "option2", value : 2 },
                { text : "option3", value : 3 },
            ]); 
        }, 1000); //simulate some delay
    }
    //return reference to observable immediately.
    return self.options[name];
};

return self;
})();


var simpleModel = function() {
    this.choice = ko.observable(2); //hard code selected option to simulated pre-saved selection.
    this.choice.options = optionsProvider.get("SomeOptionType");  
};

ko.applyBindings(new simpleModel());
4

3 に答える 3

0

ここに更新されたフィドルがありますhttp://jsfiddle.net/sujesharukil/5YFry/5/

オプションの変更をサブスクライブしてから、値を設定できます。これは簡単な方法です。

var simpleModel = function() {
    var self = this;
  this.choice = ko.observable(2); //hard code selected option to simulated pre-saved     selection.
  this.choice.options = optionsProvider.get("SomeOptionType");  
    this.choice.options.subscribe(function(newValue){
        self.choice(2);
    });  
};
于 2013-04-17T15:32:25.737 に答える