Reapply bindings in knockout

Question

I basically want to reapply bindings on the same page for the different objects, but there is strange behavior. After I reapply the binding, the list of items is lost.

Please see here: http://jsfiddle.net/baio/9UcUs/5/

What to do?

Answer 1

The short answer is that it's not supported. The long answer is that there are some ways around it. One way is to call cleanNode before applyBindings, but this doesn't clear event handlers. Another way is to wrap your view model in an observable and then update that observable to reapply bindings; this works much better, but still has a slight problem (see below).

Here is your example using the observable view model method: http://jsfiddle.net/mbest/9UcUs/9/

The only problem I've found with using an observable view model is that event handlers are not completely updated with the new view model. They will call the correct function in the new view model, but the this and data values will be for the original view model.

Edit:

Knockout 3.0 (currently scheduled for release this month) fully supports observable view models. There still could be issues with custom bindings, but hopefully all this will be documented soon.

Answer 2

you can bind the same viewmodel to different elements, you need specify the element you want to apply your binding to.

ko.applyBindings(vm, $('#yourul'));

ko.applyBindings(vm, $('#div'));