1

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

基本的に、ビュー モデル ( ) をバインドする必要がある 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#threeVM2#diffmodelVM1

この種の状況に対する適切な解決策はありますか?

4

1 に答える 1

2

非常に簡単な解決策は、カスタム バインディングを使用して、要素の子がバインドされないようにすることです。

次のようになります。

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バインディングとして使用することもできました。

于 2012-05-03T04:25:09.100 に答える