嵌套多個虛擬機使用嵌套的DIV

Question

我遇到與VM嵌套DIV不會綁定。任何想法？我正在嘗試以下，它打破了任何想法？

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