使用嵌套DIV嵌套多个VM

Question

我遇到嵌套的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'));

有任何想法吗？

Answer 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>