使用嵌套的 DIV 嵌套多个 VM

【问题标题】：Nesting multiple VMs with nested DIVs使用嵌套的 DIV 嵌套多个 VM
【发布时间】：2013-01-11 01:30:23
【问题描述】：

我发现嵌套的 div 不会与 VM 绑定。有什么想法吗？我正在尝试以下方法，但它打破了任何想法？

<div id="div1">
   <div id="div2">

   </div>
</div>

如果我试试这个效果很好：

<div id="div1">
</div>

<div id="div2">
</div>

Javascript：

ko.applyBindings(vm1, document.getElementById('div1'));
ko.applyBindings(vm2, document.getElementById('div2'));

有什么想法吗？

【问题讨论】：

【解决方案1】：

当您绑定div1 时，它将绑定所有内容，包括div2 中的内容。当您绑定div2 时，它将再次绑定元素。这不是一个好的情况，因为元素将附加多个事件处理程序。否则，其中一个 applyBindings 可能会出错，因为元素不希望绑定到不同的视图模型。

这里的文章列出了一种保护内部元素不被外部调用绑定的方法：http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html

另一种选择是使用单一视图模型，例如：

var viewModel = {
  vm1: vm1,
  vm2: vm2
};

ko.applyBindings(viewModel);

然后，像这样绑定：

<div id="div1" data-bind="with: vm1">
   <div id="div2" data-bind="with: $root.vm2">

   </div>
</div>

【讨论】：