title: Large scale KnockoutJS application architecture
body: <p>I love KnockoutJS but have been struggling to figure out the best way to build large scale Javascript applications with it.</p>
  
  <p>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 <code>ko.applyBindings()</code> on the main view. Here is the example code  I have:</p>
  
  <pre><code>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));
  </code></pre>
  
  <p>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.</p>
  
  <p>Thoughts?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>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? </p>