Question

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

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

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

Answer 1

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

有几种方法可以处理此类详细信息：Example of knockoutjs pattern for multi-view applications

如果您确实需要在内容中间使用“孤岛”，以便稍后调用应用绑定，则可以使用此处描述的技术：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”绑定构造，以便绑定部分视图模型。您可以在此fiddle

中找到它

<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" binding documentation，查看AJAX回调 - 部分绑定方案。

Answer 4

我的英语非常糟糕...... =）

我使用Sammy加载部分视图，并使用Knockout绑定模型，我尝试使用ko.cleanNode但清除所有绑定，所有DOM节点在绑定时都已更改，属性__ko__是聚合，然后我用这个代码删除了该属性，并且工作!!，'#main'是我的节点。

var dom = dom || $("#main")[0];
for (var i in dom) {
  if (i.substr(0, 6) == "__ko__") {
     delete (dom[i]);
     break;
  }
}

使用Ggle翻译后：

我使用Sammy加载部分视图，使用Knockout绑定模型，我尝试使用ko.cleanNode但清除所有绑定，所有DOM节点在绑定时都发生了变化，属性 ko 是聚合的，然后我使用此代码删除了该属性，并且工作!!，'＃main'是我的节点。

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

4 个答案: