Question

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.

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();
});

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 http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html 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

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();
});

Answer 1

Your second example is more correct, but shouldn’t you be binding the page-specific view models to a specific html element that you’ve surrounded with the stop binding comment?

ko.applyBindings(MasterViewModel.pageViewModels, $('#pageElement')[0]);

However, if you want to have nicely decoupled objects that can talk to each other, then you might want to look at Knockout Postbox