1

私は、observableArray に基づくオプションを使用して選択を設定するセットアップをしています。この配列には、ID と名前だけでなく、より多くのプロパティを持つオブジェクトが含まれています。選択した値として完全な JavaScript オブジェクトを使用できるようにしたいと考えています。

データは次のようになります。

this.optionData = ko.observableArray([
    {id: 1, name: "One", param: true},
    {id: 2, name: "Two", param: true},
    {id: 3, name: "Three", param: true},
]);

そして、ノックアウトの標準的なビンディングを使えば、その素晴らしく簡単です

<select data-bind="
   options: optionData,
   optionsText: 'name',
   optionsCaption: 'Please select',
   value: selectedOption">
</select>

ただし、選択したものをスタイルし、それらにさらに機能を追加したいと考えています。これにはselect2を使用します。私は次のカスタム バインディングを思いつきました。これは、optionsText と optionsValue の両方を持つ単純なバインディングでは問題なく機能しますが、optionsValue のないオプション バインディングでは機能しません (つまり、オブジェクトを値として使用する場合)。

ko.bindingHandlers.select2 = {
init: function (el, valueAccessor, allBindingsAccessor, viewModel) {

    ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
        $(el).select2('destroy');
    });

    var allBindings = allBindingsAccessor(),
        select2 = ko.utils.unwrapObservable(valueAccessor());

    $(el).select2(select2);
},

update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

    var selectedOptions = ko.unwrap(allBindingsAccessor.get("selectedOptions")),
        val = ko.unwrap(allBindingsAccessor.get("value")),
        options = ko.unwrap(allBindingsAccessor.get("options"));

    if ($(element).prop('multiple')) {
        $(element).select2('val', selectedOptions, true);
    }
    else {
        $(element).select2("val", val);
    }

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

};

私の質問はこれです。カスタム バインディングをデフォルトのノックアウト オプション バインディングとして機能させるには、何を更新する必要がありますか?

問題を示すために、このフィドルを作成しました: http://jsfiddle.net/SuneRadich/LdF45/1/

4

2 に答える 2

1

私の例は、 optionsAfterRender を使用してオブジェクトを取得するのに役立つかもしれません。

<select id="selectArticles" multiple
 data-bind="options: availableArticles, selectedOptions: selectedArticles,
 optionsText: function(item){return item.title},
 optionsAfterRender: function(option, item){option.value = item}">
</select>

働くフィドル

必要に応じて、単一選択に変更できます。

于 2015-06-26T16:45:06.660 に答える