Knockout Reuse Bindings

Question

I basically want to re-bind the bindings on the same page for different objects, but there is a weird behavior. After I re-bind the binding, the list of elements will be lost.

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

What to do?

Answer 1

The short answer is that it is not supported. The long answer is that there are some ways around. One way is to invoke cleanNode before applyBindings , but this does not clear the event handlers. Another way is to wrap your look model in the observable, and then update to observe the snap binding; this works much better, but still has a slight problem (see below).

Here is your example using an observable-type model method: http://jsfiddle.net/mbest/9UcUs/9/

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

Edit:

Knockout 3.0 (currently scheduled for release this month) fully supports observable viewing models. There may be problems with user bindings, but hopefully all of this will be documented soon.

Answer 2

you can bind the same view model to different elements, you need to specify the element to which you want to apply the binding.

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

Answer 3

Doing:

 ko.applyBindings(viewModel, $('#somejQObj')[0]); 

It works as indicated in the comments of @fengd's answer. There is currently a table populated by the foreach statement that has expandable rows, each of which has a dynamically added subtable, which is also populated by the foreach statement. After each subcategory is dynamically inserted, the execution above sets the bindings for the subtable and fills in the data.