7

ノックアウト.jsを使用しています。少し奇妙な状況で立ち往生しています（説明するのは難しいですが、説明しようとしています。明確でない場合は申し訳ありません）。単一の選択リストでカスタムバインディングとオプションバインディングを使用しています:

  <select data-bind="options : arrayOfOptions, optionsText: 'Name', 
           optionsValue: 'Name', chosen: { }">
  </select>

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingAccessor, 
                    viewModel, bindigContext) {
        var options = ko.utils.unwrapObservable(valueAccessor() || {});
        $(element).chosen(options);
    }
};

arrayOfOptionsここで、実行時に selectlist は配列から利用可能なすべてのオプションで埋められ、select-list にCHOSEN PLUGINchosenを適用するカスタム バインディングです。

ここで私が直面している問題は、その時点で選択リストに選択プラグインを適用したときのカスタムバインディングで、選択リストにarrayOfOptions配列のオプションが入力されていないことです。custom binding簡単に言えば、 が の前に実行されていることを意味しoptions bindingます。オプションバインディングの後にカスタムバインディングが適用されるように、誰かがこれに対する解決策を教えてください。

4

4 に答える 4

5

通話をchosenアップデートに移動します。

http://jsfiddle.net/jearles/avSfa/28/

--

ko.bindingHandlers.chosen = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();

        var options = {default: 'Select one...'};
        $.extend(options, allBindings.chosen)

        $(element).attr('data-placeholder', options.default);                
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).chosen();
    }
};

--

または、 を使用setTimeoutして呼び出しをchosen実行キューの一番下に移動することもできます。chosenこれにより、Knockout オプションが変換を試行する前に、その作業を行うための拘束時間が与えられます。

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingAccessor, 
                    viewModel, bindingContext) {
        var options = ko.utils.unwrapObservable(valueAccessor() || {});
        setTimeout(function() { $(element).chosen(options); }, 0);
    }
};
于 2012-11-03T16:22:29.680 に答える
1 
ko.bindingHandlers.chosen = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var options = allBindingsAccessor().options;

    options.subscribe(function (newValue) {
        $(element).chosen();
        $(element).trigger("chosen:updated");
    });

    var value = allBindingsAccessor().value;
    value.subscribe(function (newValue) {
        $(element).trigger("chosen:updated");
    });
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    if (element.options.length > 0) {
        $(element).chosen();
        $(element).trigger("chosen:updated");
    }
}

};

これはKO JS 3.0でうまくいきました

于 2014-02-18T09:21:01.070 に答える
0

上記の回答は提示された問題を解決する可能性がありますが、{'disable_search':true} を渡して検索を無効にするなど、選択したドロップダウン メニューをカスタマイズするには不十分なようです。

バインディングで選択したカスタマイズを渡すことができるように、次の変更をお勧めします。

<select data-bind="options : arrayOfOptions, optionsText: 'Name', 
    optionsValue: 'Name', chosen: { 'disable_search': true }">
</select>

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = allBindingsAccessor().options;
        var chosenOptions = allBindingsAccessor().chosen;

        options.subscribe(function (newValue) {
            $(element).chosen(chosenOptions);
            $(element).trigger("chosen:updated");
        });

        var value = allBindingsAccessor().value;
        value.subscribe(function (newValue) {
            $(element).trigger("chosen:updated");
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        if (element.options.length > 0) {
            var chosenOptions = allBindingsAccessor().chosen;
            $(element).chosen(chosenOptions);
            $(element).trigger("chosen:updated");
        }
    }
};
于 2014-07-08T17:41:48.940 に答える