2012-02-13 8 views
17

ノックアウトを使用して、ko.applyBinding(viewModel, "divId")を呼び出すと、バインドした要素の子(「divId」)を再帰的にバインドします。子ノードでこの評価を中止したいと思います。これを行う方法はありますか?子要素で評価するknockout.jsバインディングを停止する方法

なぜ...

理由私はこれが基本的なレイアウトと...笑顔...ナビゲーションを処理する、ナビゲーションビューモデルにページ全体をバインドしたいと思います。さまざまなページで、ある領域をナビゲーションビューモデルのプロパティではない異なるビューモデルにバインドしたいと思います。現時点では、ナビゲーションビューモデルに必要なプロパティがないため、これを行うと「バインディングを解析できません」というエラーが表示されます。私が束縛を止めてドームを歩くことができれば、これらのアイテムを別々に束縛することができます。

答えて

35

を行います。通常、複数の「サブ」ビューモデルをメインビューモデルに追加し、さまざまな領域にバインドするために実際のビューモデルを使用してwithバインディングを使用します。

あなたは技術的にあなたがしていることは可能です。 KOに子要素のバインドを処理するように指示するカスタムバインディングを作成できます。

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

これを要素に配置すると、KOは子を無視します。次に、この要素の子に対してko.applyBindingsを別のビューモデルで呼び出すことができます。

サンプル:一般的にいえ

http://jsfiddle.net/rniemeyer/tWJxh/、あなたがwithバインディングを使用して、メインビューモデルの下に複数のビューモデルを使用します。

+1

優れたもの、まさに私が望んでいたもの。私のシナリオは一般的ではないかもしれませんが、実際のモジュールベースの読み込み手法では、各モジュールが他のモジュールと独立してテストを楽しくします。 –

+0

これは単にバインディングを停止するために余分なコンテナを使用します。上記のstopBindingsのようなカスタムバインディングハンドラをコンテナレス(コメント)ノードでサポートするのは簡単でしょうか?それは高度にモジュラーなアプリケーションで便利でしょう:) – AlexG

+0

2.1(RCで)では、以下のようにコンテナレスのカスタムバインディングハンドラが可能です:http://jsfiddle.net/rniemeyer/75yQD/。だから、問題はありません。 2.0では、 'ko.virtualElements.allowedBindings'は公開されていませんでした。 –

3

私がこれをやったひとつの方法は、ナビゲーション(または単に)のためのセクションを作成し、それにnavVMをバインドすることです。次に、コンテンツの別のセクションを作成し、contentVMをバインドします。そうすれば、紛争もなく、すべてが非常に分かれています。

<body> 
    <div id="navSection"> 
    </div> 
    <div id="contentSection"> 
    </div> 
</body> 

は、その後、あなたはこの1つに行くことができるいくつかの方法がありますko.applyBinding(navVM、 "navSection")とko.applyBinding(contentVM、 "contentSection")

+0

mmm ...残念ながら、同じサブツリー内にある2つの別々のバインディングコンテキストを作成するのは簡単ではありません –

+1

(「Ryanの注記」を参照)、私はそれが考えるより構造的かもしれないと言っていましたあなた自身のコンポーネントを疎結合されたモジュールとして使用できます。 –