Geek Answers Handbook

Knockout / Select2: Run select2 to update based on updating the observed option

When upgrading from Knockout.js 2.x to 3.x, I noticed that this does not work: I have a screen where I have <select>, depending on the observable array of observables, and I wrap <select>with Select2 wrapper.

Now it was that when one of the observer options was updated, the selection would be updated. And this is still the case. But I cannot get the Select2 binding to update normally at the same time.

I use the binding handlers recommended by the Select2 Github Page :

ko.bindingHandlers["select2"] = {
    after: ["options", "value", "selectedOptions"],
    init: function (element, valueAccessor) {
        $(element).select2(ko.unwrap(valueAccessor()));

        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).select2("destroy");
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        //trying various methods to register interest with dependency checking
        //var allBindings = allBindingsAccessor();
        //if (allBindings.options) { allBindings.options(); }
        //if (allBindings.value) { allBindings.value(); }
        //if (allBindings.selectedOptions) { allBindings.selectedOptions(); }
        $(element).trigger("change");
    }
};
(function () {
    var updateOptions = ko.bindingHandlers["options"]["update"];
    ko.bindingHandlers["options"]["update"] = function (element) {
        var ret = updateOptions.apply(null, arguments);
        var $el = $(element);
        if ($el.data("select2")) { $el.trigger("change"); }
        return ret;
    }
})();
(function () {
    var updateSelectedOptions = ko.bindingHandlers["selectedOptions"]["update"];
    ko.bindingHandlers["selectedOptions"]["update"] = function (element) {
        var ret = updateSelectedOptions.apply(null, arguments);
        var $el = $(element);
        if ($el.data("select2")) { $el.trigger("change"); }
        return ret;
    }
})();

The following is an example. You will notice that when you change the value of one of the inputs representing the elements in the element, it does not update Select2 to match (but it updates the support selection).

http://jsfiddle.net/mrmills/MfttX/1/

+2
1

, , optionsValue: 'choice':

<select data-bind="options: choices, 
                   optionsText: 'choice', 
                   optionsValue: 'choice', 
                   select2: {}"></select>

. fiddle

+4

More articles:


All Articles