Question

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

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

这是我在实际应用程序中尝试做的一个粗略的例子，它是所有命名空间和单独的文件，因此只运行特定于页面的代码。执行此操作的最佳做法是什么我基于上面的http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html，但是当我在应用程序中执行此操作时，我会得到类似“无法绑定到pageViewModel1 undefined”的内容，我应该以不同的方式设置我的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();
});

Answer 1

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

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

但是，如果你想拥有可以相互交流的很好的解耦对象，那么你可能想看看Knockout Postbox

设置和初始化多个挖空视图模型

1 个答案: