title: Setting and Initializing multiple knockout view models
body: <p>I am trying to create and initialize some sort of master view model that contains common view models that might be run on every page and page specific models that are appended on page load.</p>
  
  <pre><code>var MasterViewModel = {
     commonViewModel1 : CommonViewModel1(),
     commonViewModel2 : CommonViewModel1()
  };
  
  var commonInit = function() {
    // Populate View Model Data
    MasterViewModel.commonViewModel1 = initCommonViewModel1();
    MasterViewModel.commonViewModel2 = initCommonViewModel2();
  
    // Apply common view model bindings
    ko.applyBindings(MasterViewModel);
  };
  
  var pageSpecificInit = function() {
    // Populate Specific View Model Data
    MasterViewModel.pageViewModel1 = initPageViewModel1();
    MasterViewModel.pageViewModel2 = initPageViewModel2();
  
   // Apply Page Specific Bindings
   ko.applyBindings(MasterViewModel);
  };
  
  $(function() {
    commonInit();
    pageSpecificInit();
  });
  </code></pre>
  
  <p>this is a crude example of what I am trying to do in the real application this is all namespaced and in separate files so that only page specific code is run. What is the best practice for doing this I somewhat based the above on <a href="http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html" rel="nofollow">http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html</a> but when I do it in the application I get something like "cannot bind to pageViewModel1 undefined" should I setup my MasterViewModel differently to be more like</p>
  
  <pre><code>var MasterViewModel = {
     commonViewModel1 : CommonViewModel1(),
     commonViewModel2 : CommonViewModel1(),
     pageViewModels : {}
  };
  
      var commonInit = function() {
    // Populate View Model Data
    MasterViewModel.commonViewModel1 = initCommonViewModel1();
    MasterViewModel.commonViewModel2 = initCommonViewModel2();
  
    // Apply common view model bindings
    ko.applyBindings(MasterViewModel);
  };
  
  var pageSpecificInit = function() {
    // Populate Specific View Model Data
    MasterViewModel.pageViewModels.pageViewModel1 = initPageViewModel1();
    MasterViewModel.pageViewModels.pageViewModel2 = initPageViewModel2();
  
   // Apply Page Specific Bindings
   ko.applyBindings(MasterViewModel.pageViewModels);
  };
  
  $(function() {
    commonInit();
    pageSpecificInit();
  });
  </code></pre>