我在想我的应用程序现在变得很大，太大了，无法使用单个ViewModel处理每个View。
所以我想知道创建多个ViewModels并将它们全部加载到一个View中会有多么困难。需要注意的是，我还需要能够将X ViewModel数据传递到Y ViewModel数据，以便各个ViewModel能够相互通信或至少彼此了解。
例如，我有一个<select>下拉列表，该select下拉列表具有selected状态，该状态使我可以将中的所选项目的ID传递<select>给单独的ViewModel ... 中的另一个Ajax调用。
在单个视图中处理大量ViewModel的任何观点都表示赞赏：)
Answers:
如果它们都需要在同一页面上，一种简单的方法是拥有一个包含其他视图模型的数组（或属性列表）的主视图模型。
masterVM = {
vmA : new VmA(),
vmB : new VmB(),
vmC : new VmC(),
}
然后，masterVM如果需要，您可以为页面本身设置其他属性。在这种情况下，视图模型之间的通信并不困难，因为您可以通过进行中继masterVM，也可以使用$parent/ $rootin绑定或某些其他自定义选项。
with:绑定，因此您不会重复自己
淘汰赛现在支持多种模型绑定。该ko.applyBindings()方法采用一个可选参数-绑定将被激活的元素及其后代。
例如：
ko.applyBindings(myViewModel, document.getElementById('someElementId'))这将激活限制为具有ID的元素someElementId及其后代。
有关更多详细信息，请参见文档。
[0]以指定实际的DOM元素（而不是jQuery对象），如下所示：ko.applyBindings(myViewModel, $('#someElementId')[0])
这是在单个视图中完成具有很多ViewModels的非常大的项目后的答案。
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创建2个视图模型。
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添加任意数量的viewmodel。但是请确保不要在已注册的div中为div创建单独的视图模型。
检查Knockout JS的MultiModels插件-https: //github.com/sergun/Knockout-MultiModels
我们使用组件来实现这一目标。（http://knockoutjs.com/documentation/component-overview.html）
例如，我们有一个正在开发的组件库：https : //github.com/EDMdesigner/knobjs
如果深入研究代码，您将看到例如我们在多个地方重用了旋钮按钮组件。
masterVM。