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

Posted 2023-02-22

【中文标题】Knockout.js：页面或页面的一部分上的多个 ViewModel 绑定

【英文标题】：Knockout.js: Multiple ViewModel bindings on a page or a part of a page

【发布时间】：2012-12-12 07:45:55

【问题描述】：

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

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

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

【参考方案1】：

您不想在同一个元素上多次调用 ko.applyBindings。最好的情况是，元素在更新时会做多余的工作，更糟糕的情况是，您将有多个事件处理程序为同一个元素触发。

这里详细介绍了处理此类事情的几个选项：Example of knockoutjs pattern for multi-view applications

如果您确实需要在内容中间有一个“孤岛”，以便稍后调用应用绑定，那么您可以使用此处描述的技术：http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html

【参考方案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。

【讨论】：

第二个参数也可以用jquery写，$("#view1")[0]

【参考方案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 回调 - 部分绑定场景。

【讨论】：

虽然这部分有效，但如果在 applyBindings 中未绑定，则在从 obserableArray（在另一个模型中）添加/删除内容时会失败。将两个模型合二为一，如下所示：***.com/questions/8676988/…

【参考方案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' 是我的节点。

【讨论】：

谢谢，这是唯一对我有用的解决方案。 ko.cleanNode 停止了 sammy.js 的工作。