设置和初始化多个剔除视图模型答案

【问题标题】：Setting and Initializing multiple knockout view models设置和初始化多个剔除视图模型
【发布时间】：2013-01-31 15:56:59
【问题描述】：

我正在尝试创建和初始化某种主视图模型，其中包含可能在每个页面上运行的通用视图模型以及在页面加载时附加的页面特定模型。

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

这是我在实际应用程序中尝试做的一个粗略示例，这都是命名空间和单独的文件，因此只运行特定于页面的代码。执行此操作的最佳做法是什么？

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

【问题讨论】：

标签： javascript knockout.js viewmodel knockout-mvc

【解决方案1】：

您的第二个示例更正确，但您不应该将特定于页面的视图模型绑定到您用停止绑定注释包围的特定 html 元素吗？

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

但是，如果您想拥有可以相互通信的良好解耦对象，那么您可能需要查看Knockout Postbox

【讨论】：

那么对于某些绑定，我仅限于页面的某些部分，我可能想在 foreach 中为 pageViewModel2.items 做一些事情我想单击像 $root.commonViewModel1 这样的按钮.updateCustomerTotal。我没有看到到处停止和启动绑定的情况。
我必须承认，我很难完全想象你在这里所追求的东西，但我已经用一些进一步的信息更新了我的答案。
对不起，我是淘汰赛新手，所以我所说的有点奇怪。我想我只是想在一个页面上绑定多个视图模型，而在初始化时没有对 DOM 元素的任何引用
没关系，不用道歉！我不能肯定地说，但我真的不认为你可以将多个模型绑定到整个页面。您可以拥有一个具有多个子视图模型的视图模型，这应该可以工作，因此我将调试并查看您的 MasterViewModel 包含的内容。听起来您有不同的问题。