KnockOutJS - Multiple ViewModels in a single View

mvvm knockout.js data-binding knockout-mapping-plugin
CLiown picture CLiown · Feb 15, 2012 · Viewed 83.4k times · Source

I'm thinking that my application is getting quite large now, too large to handle each View with a single ViewModel.

So I'm wondering how difficult it would be to create multiple ViewModels and load them all into a single View. With a note that I also need to be able to pass X ViewModel data into Y ViewModel data so the individual ViewModels need to be able to communicate with each other or at least be aware of each other.

For instance I have a <select> drop down, that select drop down has a selected state which allows me to pass the ID of the selected item in the <select> to another Ajax call in a separate ViewModel....

Any points on dealing with numerous ViewModels in a single View appreciated :)

Answer

sanatgersappa picture sanatgersappa · Jul 20, 2012

Knockout now supports multiple model binding. The ko.applyBindings() method takes an optional parameter - the element and its descendants to which the binding will be activated.

For example:

ko.applyBindings(myViewModel, document.getElementById('someElementId'))

This restricts the activation to the element with ID someElementId and its descendants.

See documentation for more details.

Related questions

How to bind knockoutjs value to MVC Action Link (id)

I have table view binds with knockoutjs model. <tbody data-bind="foreach: items, visible: items().length > 0"> <tr> <td data-bind="text: Title"></td> <td data-bind="text: Type"></td> <…

Read More
How to add/insert an item into an ObservableArray at a certain position with Knockout.js

All the knockout examples I have found seem to add a new item to the end of an ObservableArray using something like: viewModel.SomeItems.push(someNewItem); This of course places the item at the end of the array. How to …

Read More
Knockout.js Make every nested object an Observable

I am using Knockout.js as a MVVM library to bind my data to some pages. I'm currently building a library to make REST calls to a web service. My RESTful web service returns a simple structure: { id : 1, details: { name: "…

Read More