KnockOutJS – 在一个视图中的多个ViewModels

我在想,我的应用程序现在变得相当大,太大,无法处理每个视图与一个ViewModel。

所以我想知道创build多个ViewModels并将它们全部加载到一个View是多么困难。 注意,我还需要能够将X ViewModel数据传递到Y ViewModel数据,因此各个ViewModel需要能够相互通信或者至less知道对方。

例如,我有一个<select>下拉菜单,select下拉菜单有一个select状态,允许我将<select>所选项目的ID传递给另一个Ajax调用,在一个单独的ViewModel中。

在单个视图中处理大量ViewModel的任何观点都将得到赞赏:)

如果他们都需要在同一个页面上,一个简单的方法就是拥有一个包含其他视图模型的数组(或属性列表)的主视图模型。

 masterVM = { vmA : new VmA(), vmB : new VmB(), vmC : new VmC(), } 

然后,如果需要,您的masterVM可以具有其他属性,对于页面本身。 在这种情况下,视图模型间的通信并不困难,因为您可以通过masterVM中继,也可以在绑定中使用$parent / $root或其他自定义选项。

Knockout现在支持多个模型绑定。 ko.applyBindings()方法接受一个可选参数 – 绑定将被激活的元素及其后代。

例如:

 ko.applyBindings(myViewModel, document.getElementById('someElementId')) 

这将激活限制为ID为someElementId及其后代的元素。

请参阅文档了解更多详情。

这是我的答案完成后,单视图中有很多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创build了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添加任意数量的视图模型。 但请确保不要为注册div中的div创build单独的视图模型。

检查Knockout JS MultiModels插件 – https://github.com/sergun/Knockout-MultiModels

我们使用组件来实现这一点。 ( http://knockoutjs.com/documentation/component-overview.html

例如,我们正在开发这个组件库: https : //github.com/EDMdesigner/knobjs

如果您深入了解代码,您会看到例如我们在多个地方重复使用了旋钮button组件。