將Knockout.js模型應用於多個元素

Question

有沒有將單一視圖模型應用於多個元素的方法？

基本上我有一段HTML的視圖模型（VM1）應該綁定到，我有另一個視圖模型（VM2）需要綁定到這個小節。雖然KO似乎並不喜歡這樣（我甚至在小節中嘗試過使用ko.cleanNode(element)）。所以我試圖做的是更具體的我的約束力，將其應用於每件需要它的東西。這很難不代碼解釋，所以在這裏我們去：

<section> 
    <ul> 
     <li id="one">...</li> 
     <li id="two">...</li> 
     <li id="three">...</li> 
     <li id="diffmodel">...</li> 
    </ul> 
</section> 

我現在有什麼VM1被綁定到<section>，並VM2被綁定到#diffmodel，但KO似乎並不喜歡這樣。

我現在的目標（和提出的問題）是應用VM1到#one，#two和#three，並VM2到#diffmodel，但似乎並沒有工作，要麼（VM1未在所有綁定）。

這種情況是否有很好的解決方案？

Answer 1

一個非常簡單的解決方案是使用自定義綁定來防止綁定元素的子元素。

這將是這樣的：

ko.bindingHandlers.ignoreBindings = { 
    init: function() { 
     return { controlsDescendantBindings: true }; 
    }   
}; 

var VM1 = { 
    valueOne: ko.observable("one"), 
    valueTwo: ko.observable("two"), 
    valueThree: ko.observable("three") 
}; 

var VM2 = { 
    different: ko.observable("different") 
}; 

ko.applyBindings(VM1); 
ko.applyBindings(VM2, document.getElementById("diffmodel")); 

HTML：

<section> 
    <ul> 
     <li id="one" data-bind="text: valueOne"></li> 
     <li id="two" data-bind="text: valueTwo"></li> 
     <li id="three" data-bind="text: valueThree"></li> 
     <li data-bind="ignoreBindings: true"> 
      <div id="diffmodel" data-bind="text: different"></div> 
     </li> 
    </ul> 
</section>​​ 

樣品在這裏：http://jsfiddle.net/rniemeyer/FesgK/

在KO 2.1（在RC的時刻）時，ignoreBindings定義綁定可能甚至可以用作無容器裝訂，如：http://jsfiddle.net/rniemeyer/FesgK/1/