3

ノックアウト (バージョン 3.1) を select2 (バージョン 4.0rc2) で動作させようとしています。

入力を受け入れて最初の選択を行うための選択を取得できません。選択は読み取り専用のようです。

以下は私の問題を示すフィドルです。これを Chrome (バージョン 40.0.2214.115 m) でテストしました。

http://jsfiddle.net/R8UF5/402/

JavaScript:

ko.utils.setValue = function (property, newValue) { if (ko.isObservable(property)) property(newValue); else property = newValue; };

ko.bindingHandlers.select2 = {
init: function (element, valueAccessor, allBindingsAccessor) {
    var obj = valueAccessor(),
        allBindings = allBindingsAccessor(),
        lookupKey = allBindings.lookupKey;

    $(element).select2(obj);

    ko.utils.registerEventHandler(element, "select2-selected", function (data) {
        if ('selectedValue' in allBindingsAccessor()) {
            ko.utils.setValue(allBindingsAccessor().selectedValue, data.choice);
        }
    });

    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).select2('destroy');
    });
},
update: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().select2Options || {};

    for (var property in options) {
        $(element).select2(property, ko.utils.unwrapObservable(options[property]));
    }

    $(element).trigger('change');
}
};

// Constructor for an object with two properties
var Country = function(name, population, price) {
    this.countryName = name;
    this.countryPopulation = population;
    this.price = price;
    this.id = price;
    this.text = name;
};

var countries = [ new Country("UK", 65000000,1), new Country("USA", 320000000,2), new Country("Sweden", 29000000,3)];
var viewModel = {
    availableCountries : ko.observableArray(countries),
    selectedCountry : ko.observable(countries[1])
};
ko.applyBindings(viewModel);

HTML: 

Your country:
<select style="width:100%;" data-bind="options: $root.availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountry, 
                   select2: {  }">

4

1 に答える 1

6

更新された動作中のフィドルは次のとおりです: http://jsfiddle.net/R8UF5/404/

あなたが直面していた主な問題は、Knockout.js がすべてのオプションを同じvalue属性 (空白) にバインドし、Select2 がそれを正しく処理できなかったことです。属性をIDに正しく設定する属性にoptionsValue: 'id'渡すことで、これを修正できました。data-bindvalue

もう 1 つの問題は、 Select2が同じ でオプションの選択を適切に処理しなくなったことvalueです。

于 2015-03-16T23:00:29.400 に答える