Viewmodels (VMs) are just objects (that get bound using ko.applyBindings()) - which means you can arbitrarily nest VMs into a parent object (what @Hasith said). You only need to pass one parent object back to Boilerplate. Bear with some ultra commented code:
// Let's assume you have your items nicely formatted in an array
// data source (and technically the objects in this array can be
// considered 'dumb' viewmodels)
var items = [
{Name:'a',isSelected:false},
{Name:'b',isSelected:true}
]
// We can apply some bindings to make 'smarter' viewmodels
// One approach is just to map using rocking KO mapping plugin
var koMapItems = ko.mapping.fromJS( items )
// You could skip the mapping plugin and go for broke
// creating your own VM mappings manually
// (you could do this using the mapping plugin with less work)
var goforbrokeVM = function( item )
{
var _name = ko.observable( item.Name )
var _dance = function() { return _name+' is space monkey' }
return {
Name: _name,
isSelected: ko.observable( item.isSelected ),
spaceMonkey: _dance
}
}
// Don't forget to assign and create your goforbrokeVMs
var epicItemVMs = []
for (var i=0;i<items.length;i++)
epicItemVMs.push( new goforbrokeVM( items[i]) )
// Now the interesting part, lets create a 'child' VM that
// we can embed in another VM. Notice this VM has as a
// property an array of VMs itself.
var childVM = {
elements: epicItemVMs,
// A sub method, because we can
otherMethod: function() { return 'wat' }
}
// And ultimately our 'master' VM with its own properties
// including the nested child VM we setup above (which you'll
// remember contains its own sub VMs)
var ParentVM = {
// And its own property
parentPropA: ko.observable('whatever'),
// Oooow look, a list of alternative ko.mapping VMs
simpleMappedItems: koMapItems,
// And a nested VM with its own nested goforbrokeVMs
nested: childVM
}
// Apply your master viewmodel to the appropriate DOM el.
ko.applyBindings( ParentVM, document.getElementById('items'))
And your HTML:
<div id="items">
<span data-bind="text: parentPropA"></span>
<!-- Step through one set of items in ParentVM -->
<div data-bind="foreach: simpleMappedItems">
<input type="checkbox" data-bind="checked: isSelected">
<span data-bind="text: Name"></span>
</div>
<!-- Or jump into the nested models and go crazy -->
<!-- ko with: nested -->
<div data-bind="foreach:elements">
<div data-bind="text: spaceMonkey"></div>
</div>
<div data-bind="text: otherMethod"></div>
<!-- /ko -->
</div>
In this way you can pass a single object (in this case ParentVM) to Boilerplate with as many nested viewmodels as you need.
Info for mapping plugin for knockout lives here: http://knockoutjs.com/documentation/plugins-mapping.html
