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

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。 最好的情况是，元素在更新时将做的工作量超过必要的工作量，更糟糕的是，您将为同一元素触发多个事件处理程序。

处理此类事物的方法有以下几种： 多视图应用程序的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回调 - 部分绑定方案。

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'是我的节点。