我认为我的应用程序现在变得非常庞大，无法使用单个ViewModel处理每个View。
因此，我想知道创建多个ViewModel并将它们全部加载到单个View中会有多难。需要注意的是，我还需要能够将X ViewModel数据传递给Y ViewModel数据，因此各个ViewModel需要能够相互通信或至少知道彼此存在。
例如，我有一个<select>下拉列表，该下拉列表具有选择状态，允许我将所选项目的ID传递给另一个Ajax调用中的单独的ViewModel....
对于在单个View中处理多个ViewModel的任何建议都将不胜感激 :)
Knockout现在支持多个模型绑定。 ko.applyBindings()方法接受一个可选参数 - 绑定将被激活的元素及其后代。
例如：
ko.applyBindings(myViewModel, document.getElementById('someElementId'))
这将限制激活范围只在具有 ID 为 someElementId 的元素及其后代元素之内。
更多详细信息，请参见文档。
[0]以指定实际的DOM元素（而不是jQuery对象），例如： ko.applyBindings(myViewModel, $('#someElementId')[0])。 - MrBoJangles如果它们需要在同一页上显示，一种简单的方法是使用一个包含其他视图模型数组（或属性列表）的主视图模型。
masterVM = {
vmA : new VmA(),
vmB : new VmB(),
vmC : new VmC(),
}
如果需要，您的 masterVM 可以有其他属性，用于页面本身。在这种情况下，视图模型之间的通信不会很困难，因为您可以通过 masterVM 中继，或者您可以在绑定中使用 $parent / $root ，或一些其他自定义选项。
with:绑定，这样您就不会重复自己。 - AlfeG这是我在完成一个包含大量ViewModel的单一视图(View)项目后的回答。
Html视图
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="container1">
<ul>
<li >Container1 item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>
</div>
<div id="container2">
<ul>
<li >Container2 item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>
</div>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/knockout-3.0.0.js"></script>
<script src="js/DataFunction.js"></script>
<script src="js/Container1ViewModel.js"></script>
<script src="js/Container2ViewModel.js"></script>
</body>
</html>
为了这个视图，我在两个独立的 JavaScript 文件中为 id=container1 和 id=container2 创建了两个视图模型。
Container1ViewModel.js
function Container1ViewModel()
{
var self = this;
self.myItems = ko.observableArray();
self.myItems.push("ABC");
self.myItems.push("CDE");
}
Container2ViewModel.js
function Container2ViewModel() {
var self = this;
self.myItems = ko.observableArray();
self.myItems.push("XYZ");
self.myItems.push("PQR");
}
那么在 DataFunction.js 中将这两个视图模型单独注册后
var container1VM;
var container2VM;
$(document).ready(function() {
if ($.isEmptyObject(container1VM)) {
container1VM = new Container1ViewModel();
ko.applyBindings(container1VM, document.getElementById("container1"));
}
if ($.isEmptyObject(container2VM)) {
container2VM = new Container2ViewModel();
ko.applyBindings(container2VM, document.getElementById("container2"));
}
});
像这样，您可以为不同的div添加任意数量的视图模型。但是请注意，不要为注册的div内部的div创建单独的视图模型。
请查看 Knockout JS 的 MultiModels 插件 - https://github.com/sergun/Knockout-MultiModels
我们使用组件来实现这个目的。 (http://knockoutjs.com/documentation/component-overview.html)
例如，我们正在开发这个组件库：https://github.com/EDMdesigner/knobjs
如果你深入代码，你会看到我们在多个地方重复使用旋钮按钮组件。