web-dev-qa-db-ja.com

Knockout.js：ページまたはページの一部にある複数のViewModelバインディング

Knockout.jsのko.applyBindings()を複数回使用して、異なるViewModelをページの1つの部分にバインドできるかどうか疑問に思っています。たとえば、私がこれを持っていたとしましょう：

<div id="foo">...</div>
...
ko.applyBindings(new PageViewModel());
ko.applyBindings(new PartialViewModel(), $('#foo')[0]);

2つのViewModelバインディングを<div id="foo>に適用しています。これは合法ですか？

mvvmknockout.jsviewmodel
21
ecbrodie

同じ要素でko.applyBindingsを複数回呼び出したくない。最良の場合、要素は更新時に必要以上の処理を実行します。最悪の場合、同じ要素に対して複数のイベントハンドラーが起動します。

このタイプのものを処理するためのいくつかのオプションがここにあります： マルチビューアプリケーションのknockoutjsパターンの例

コンテンツの中央に、後でバインディングを適用する「島」が本当に必要な場合は、ここで説明されている手法を使用できます。 http://www.knockmeout.net/2012/05 /quick-tip-skip-binding.html

20
RP Niemeyer

これは、JqueryMobile-SPAの実装時に発生する一般的な障害です。メソッド：ko.applyBindings（viewmode、root dom element）は2つの引数を受け入れます。 2番目の引数は、ページに複数のVMがある場合に役立ちます。

例えば ​​：

ko.applyBindings(model1, document.getElementById("view1")); 
ko.applyBindings(model2, document.getElementById("view2"));

ここで、view1とview2はそのモデルのルートdom要素です。 JqueryMobile-SPAの場合、これは対応するモデルのページIDになります。

16
predhin

これを行う最良の方法は、部分ビューモデルをバインドするdivで「with」バインディング構成を使用することです。あなたはこれでそれを見つけることができます fiddle

<div data-bind="with: model">
   <p data-bind="text: name"></p>
</div>

<div data-bind="with: anothermodel">
   <p data-bind="text: name"></p>
</div>​

var model = {
   name: ko.observable('somename'),
}

var anothermodel = {
    name: ko.observable('someanothername'),
}
ko.applyBindings(model);​

また、Knockoutサイト​​の "with"バインディングドキュメント をチェックして、AJAXコールバック-部分的なバインディングのシナリオを確認してください。

11
Scorpion-Prince

私の英語はとても悪いです... =）

Sammyを使用して部分ビューをロードし、Knockoutを使用してモデルをバインドします。ko.cleanNodeですが、すべてのバインディングをクリーンアップします。すべてのDOMノードは、バインド、プロパティ__ko__が集約された後、このコードでそのプロパティを削除し、動作します!!、'#main'は私のノードです。

var dom = dom || $("#main")[0];
for (var i in dom) {
  if (i.substr(0, 6) == "__ko__") {
     delete (dom[i]);
     break;
  }
}

ggleトランスレータを使用した後：

部分ビューのロードにはサミーを使用し、モデルのバインドにはノックアウトを使用します。ko.cleanNodeを使用しようとしますが、すべてのバインディングをクリーンアップします。バインド、プロパティkoが集約された後、このコードでそのプロパティを削除し、動作します!!、 '＃main'は私のノードです。

2
user2612497