Javascript 设置和初始化多个淘汰视图模型

我正在尝试创建和初始化某种主视图模型，该模型包含可能在每个页面上运行的公共视图模型，以及附加在页面加载上的特定于页面的模型

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

这是一个粗略的例子，说明了我在实际应用程序中要做的事情—所有这些都是命名空间的，并且都在单独的文件中，因此只运行特定于页面的代码。做这件事的最佳实践是什么？我在某种程度上是基于上述内容，但当我在应用程序中做这件事时，我会得到类似于“无法绑定到未定义的pageViewModel1”的信息。我是否应该将MasterViewModel设置为与

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

---

您的第二个示例更为正确，但是您不应该将特定于页面的视图模型绑定到一个特定的html元素上吗

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

---

但是，如果您希望拥有能够相互通信的良好解耦对象，那么您可能希望查看第二个示例，您的第二个示例更为正确，但是您不应该将特定于页面的视图模型绑定到一个特定的html元素上吗？您已经用停止绑定注释包围了该元素

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

---

但是，如果您希望拥有能够相互通信的良好解耦对象，然后，您可能想查看

那么，对于某些绑定，我仅限于页面的某些部分。我可能想在foreach for pageViewModel2.items中执行某些操作。我想单击$root.commonViewModel1.updateCustomerTotal之类的按钮。我不认为到处都有停止和启动绑定的理由。我必须承认，我很难完全想象你在这里追求什么，但我已经用一些进一步的信息更新了我的答案。对不起，我是新手，所以我说的有点奇怪。我想我只是想在一个页面上绑定多个视图模型，而不在初始化中引用DOM元素。没关系，不需要道歉！我不能确定，但我真的不认为可以将多个模型绑定到整个页面。您可以有一个视图模型和多个子视图模型，这应该可以工作，所以我将调试并查看MasterViewModel包含的内容。听起来您有不同的问题。那么，对于某些绑定，我仅限于页面的某些部分。我可能希望在foreach for pageViewModel2.items中执行某些操作。我希望单击$root.commonViewModel1.updateCustomerTotal之类的按钮。我不认为到处都有停止和启动绑定的理由。我必须承认，我很难完全想象你在这里追求什么，但我已经用一些进一步的信息更新了我的答案。对不起，我是新手，所以我说的有点奇怪。我想我只是想在一个页面上绑定多个视图模型，而不在初始化中引用DOM元素。没关系，不需要道歉！我不能确定，但我真的不认为可以将多个模型绑定到整个页面。您可以有一个视图模型和多个子视图模型，这应该可以工作，所以我将调试并查看MasterViewModel包含的内容。听起来你有不同的问题。