Knockout.jsモデルを複数の要素に適用する

Question

複数の要素に単一のビューモデルを適用する方法はありますか？

基本的には、ビューモデル（VM1）がバインドされるHTMLセクションがあり、このサブセクションにバインドする必要がある別のビューモデル（VM2）があります。 KOはこれほど好きではないようです（私はサブセクションでko.cleanNode(element)を使って試してみました）。それで、私がしようとしているのは、それを必要とする各作品に適用することで、私の拘束力をより明確にすることです。これは、コードなしで説明するのは難しいので、ここで私達は行く：私は現在VM1が<section>にバインドされている必要があり何

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

、およびVM2は#diffmodelに拘束されるものではなく、KOはこれを好きにいないようです。 （VM1が全く拘束されていない）

私の現在の目標（と提案質問は）VM1#one、#two、および#three、およびVM2から#diffmodelに適用することですが、それはどちらか動作するようには思えません。

このような状況に適したソリューションはありますか？

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

サンプル：

それはのようなものになるだろう（現時点ではRC）でKO 2.1ではhttp://jsfiddle.net/rniemeyer/FesgK/

、ignoreBindingsはカスタム可能性結合します次のようなコンテナレスバインディングとしても使用できます。http://jsfiddle.net/rniemeyer/FesgK/1/