Multiselect not updated after knockout's value binding has changed

[samppis]

Seems like the multiselect isn't updated if using the value binding and the value of the observable changes.

This appears to fix it when placed in ko.bindingHandlers.multiselect.update:

if (typeof allBindingsAccessor().value === "function") {
    allBindingsAccessor().value.subscribe(function() {
        $(element).multiselect('rebuild');
    });
}

[Zache]

According to Knockouts documentation the value binding is for regular selects, not multiple.

http://knockoutjs.com/documentation/selectedOptions-binding.html

[davidstutz]

As I am not familiar with Knockout, I will leave this open, maybe there is someone out there willing to solve all Knockout-related issues for Bootstrap Multiselect.

[Aaron-P]

This was probably fixed by https://github.com/davidstutz/bootstrap-multiselect/pull/447.

[joeheyming]

This is not fixed. While the changes in #447 call a refresh when the knockout value binding handler changes, it neglects the fact that knockout doesn't support <select multiple="multiple"> with data-bind="value..."

Turns out jQuery does support updating multiple values. Right now #447 correctly calls $().multiselect('refresh'). but before this, you need to unwrap the data behind value and do this:

$(yourselect).val(values).multiselect('refresh');

I'm going to submit a pull request for this

[Aaron-P]

That seems to be a case of using knockout incorrectly then. When using select multiple selectedOptions should be used instead of value, which the binding also supports. That change was because bootstrap multiselect can also be used for non select multiple inputs (radio buttons). Should this really try to work around the developer not using the correct binding?

[joeheyming]

gotcha. We need better documentation then?

[joeheyming]

Created https://github.com/davidstutz/bootstrap-multiselect/pull/666 to clarify this

[ljfraney]

Good to hear that people are looking at this. I'm using selectedOptions with success. My selectedOptions array is updated based on the checkboxes selected. But, if the selectedOptions observable array is updated dynamically, the multiselect is not updated. I don't really need two-way binding for my project, but it would be nice if it worked. https://jsfiddle.net/ljfraney/gsy3morp/

[joeheyming]

This works for me:

https://jsfiddle.net/joeheyming/q6gemrv5/

Instead of doing $('select').multiselect({your: config}); Use the knockout binding instead:

<select data-bind="options: yourObjectObservable, optionsText: 'your-key', optionsValue: 'value-key', selectedOptions: yourIdArray, multiselect: {your: config}" >

This installs the correct subscriptions to the selectedOptions and options bindings.

[ljfraney]

That makes sense. If you're going to use knockout, wire it up with knockout. Thanks for the example!