Large scale KnockoutJS application architecture
asp.net-mvc-3, javascript, knockout-2.0, knockout.js
Solution
I like to set up my view models using prototypal inheritance. Like you I have a "master" view model. That view model contains instances of other view models or observable arrays of view models from there you can use the "foreach" and "with" bindings to in your markup. Inside your "foreach" and "with" bindings you can use the $data, $parent, $parents and $root binding contexts to reference your parent view models.
Here are the relevant articles in the KO documentation.
foreach binding
with binding
binding context
If you want I can throw together a fiddle. Let me know.
Problem
I love KnockoutJS but have been struggling to figure out the best way to build large scale Javascript applications with it. Right now the way I'm handling the code is by building with a root view model which usually starts at the master page level and then expanding on that. I only `ko.applyBindings()` on the main view. Here is the example code I have: ``` var companyNamespace = {}; // Master page. (a.k.a _Layout.cshtml) (function(masterModule, $, ko, window, document, undefined) { var private = "test"; masterModule.somePublicMethod = function() {}; masterModule.viewModel = function() { this.stuff = ko.observable(); }; }(companyNamespace.masterModule = companyNamespace.masterModule || {}, jQuery, ko, window, document)); // Index.cshtml. (function(subModule, $, ko, window, document, undefined) { var private = "test"; subModule.somePublicMethod = function() {}; subModule.viewModel = function() { this.stuff = ko.observable(); }; $(document).ready(function() { ko.applyBindings(companyNamespace.masterModule); }); }(companyNamespace.masterModule.subModule = companyNamespace.masterModule.subModule || {}, jQuery, ko, window, document)); ``` I'm just worried since this is a tree structure that if I needed to insert a double master page or something like that, that this would be very cumbersome to re-factor. Thoughts? EDIT I'm aware that you can apply bindings to separate elements to change the scope of the bindings however what if I have nested view models?