Knockout.js:页面或页面的一部分上的多个ViewModel绑定

Question

我想知道是否可以使用Knockout.js的ko.applyBindings()多次不同的ViewModels绑定到页面的一个部分.例如,假设我有这个:

<div id="foo">...</div>
...
ko.applyBindings(new PageViewModel());
ko.applyBindings(new PartialViewModel(), $('#foo')[0]);

我现在正在应用两个ViewModel绑定<div id="foo>.这合法吗？

Answer 1

您不希望在相同的元素上多次调用ko.applyBindings.最好的情况是,元素在更新时将做的工作量超过必要的工作量,更糟糕的是,您将为同一元素触发多个事件处理程序.

处理此类事物的方法有以下几种: 多视图应用程序的knockoutjs模式示例

如果您确实需要在内容中间使用"孤岛",以便稍后调用应用绑定,则可以使用此处描述的技术:http://www.knockmeout.net/2012/05/quick-tip -skip-binding.html

Answer 2

这是实现JqueryMobile-SPA时常见的障碍.方法:ko.applyBindings(viewmode,root dom element)接受两个参数.当您的页面中有多个VM时,第二个参数会很有用.

例如 :

ko.applyBindings(model1, document.getElementById("view1")); 
ko.applyBindings(model2, document.getElementById("view2"));

其中view1和view2是该模型的根dom元素.对于JqueryMobile-SPA,这将是相应模型的页面ID.

Answer 3

执行此操作的最佳方法是在div中使用"with"绑定构造,以便绑定部分视图模型.你可以在这个小提琴中找到它

<div data-bind="with: model">
   <p data-bind="text: name"></p>
</div>

<div data-bind="with: anothermodel">
   <p data-bind="text: name"></p>
</div>?

var model = {
   name: ko.observable('somename'),
}

var anothermodel = {
    name: ko.observable('someanothername'),
}
ko.applyBindings(model);?

还要查看Knockout站点上的"with"绑定文档,以查看AJAX回调 - 部分绑定方案.