Knockout does not sync manual set of option's

Question

I'm using this jQuery plugin for a multi select list box http://www.quasipartikel.at/multiselect/, and it's all bound to a view model using knockoutjs.

The plugin sets the option's selected attribute when an item is selected or deselected. But knockout is obviously not checking for change in that attribute and so my view model is not being updated.

Now before I change the plug in and write a custom binding is there a way to tell knockoutjs to monitor the selected attribute?

Answer 1

You can probably just set knockout to handle click events instead, that would be the easiest. For example

To Select, add on right side <li> or whatever you think is best

data-bind="click: function(){ select(country); }"

To Deselect, add on left side <li> or whatever you think is best

data-bind="click: function(){ deselect(country); }"

And then you also need handlers to add/remove/move between observableArrays

viewModel = {
  select: function(){ /* add to observableArray */ },
  deselect: function(){ /* remove from observableArray */ }
};