Knockout.js binding handler for the JQuery UI multiselect widget

example.html

<select multiple="multiple"
        data-bind="multiselect  : { config : multiSelectConfig,
                                    options: options,
                                    selectedOptions : selectedOptions }" />

KOMultiselectBinding.js

ko.bindingHandlers.multiselect = {
    init: function (element, valueAccessor, allBindingAccessors) {
        "use strict";

        var options = valueAccessor();

        ko.bindingHandlers.options.update(
            element,
            function() { return options.options; },
            allBindingAccessors
        );

        ko.bindingHandlers.selectedOptions.init(
            element,
            function() { return options.selectedOptions; },
            allBindingAccessors
        );

        ko.bindingHandlers.selectedOptions.update(
            element,
            function() { return options.selectedOptions; },
            allBindingAccessors
        );

        $(element).multiselect(options.config);

        //make view model know about select/deselect changes
        $(element).bind("multiselectcheckall", function () { $(element).trigger("change"); });
        $(element).bind("multiselectuncheckall", function () { $(element).trigger("change"); });
    },
    update: function (element, valueAccessor, allBindingAccessors) {
        "use strict";

        var options = valueAccessor();
        //update html if items set through code
        ko.bindingHandlers.selectedOptions.update(
            element,
            function () { return options.selectedOptions; },
            allBindingAccessors
        );

        $(element).multiselect("refresh");
    }
};