4

私は現在、SPA を試しています。私の最初のアプリの構造は、Mikowski/Powell による近刊の本Single Page Web Applicationsで説明されているパターンにほぼ従っています。このアプリは、互いにネストされたモジュールで構成されています。1 つのルート モジュールには 1 つまたは複数のサブモジュールがあり、それぞれに 1 つまたは複数の独自のサブモジュールがある場合があります。サブモジュールを DOM に追加するために、親モジュールは (jQuery-) 要素を子に提供し、独自のマークアップを添付します。それ以外は、モジュールは多かれ少なかれ完全に分離されており、それらがどのように機能するかは、SPA の残りの部分にとって重要ではありません。各モジュールは独自のファイルに存在し、依存関係は require.js を使用して解決されます (ブックはそれらを手動でインポートします)。

今、ノックアウト js を使用していくつかのモジュールをレンダリングしたいと考えていますが、私は ko にかなり慣れていないので、疑問に思っています: トップレベルのモジュールにいくつかのサブモジュールが接続されていると想像してください。サブモジュールの1つはそうしますが、別のサブモジュールはそうしませんが、ノックアウト.jsを使用してバインディングを行います。もちろん、それぞれに独自のモデルデータがあります。

  1. 親と子 (それぞれのコンテナー要素に制限されています) に ko-bindings を適用すると、子のマークアップが実際に親のマークアップによって囲まれているときに何らかの形で干渉しますか?
  2. このような状況で、require.js の依存関係の解決をどのように実装しますか?

この問題をよく表している例として、「タブ付きパネル」があります。親には複数のタブがあり、現在表示されているタブを決定するためにノックアウトを使用します。各タブはそれ自体がモジュールであり、任意の複雑なマークアップ/機能自体を持つことができるため、独自のファイル/モジュールにカプセル化する必要があります。

4

1 に答える 1

7

ko.applyBindings親要素を呼び出してから、その子要素の 1 つを呼び出すことは望ましくありません。要素は 2 回バインドされますが、ほとんどの場合、子が別のコンテキストに対してバインドしようとしている可能性があるため、エラーが発生するだけです。

いくつかの選択肢:

1-要素が重なっていない場合はko.applyBindings、ルート要素として使用する DOM 要素である 2 番目の引数を呼び出して指定できます。これは次のようになります。

ko.applyBindings(viewModelOne, document.getElementById("one"));
ko.applyBindings(viewModelTwo, document.getElementById("two"));

2-あなたの質問では、ノックアウトはタブと、個々のタブが子要素である可能性のある各タブのコンテンツを管理しているようです。1 つの選択肢は、次のようなサブ ビュー モデルを含む全体的なビュー モデルを作成することです。

var ViewModel = function() {
   this.tabs = ko.observableArray();
   this.selectedTab = ko.observable();
};

「タブ」オブジェクトには、独自のビュー モデルを含めることができます。次のようなものかもしれません: http://jsfiddle.net/rniemeyer/PctJz/

3-追加の代替方法については、http ://www.knockmeout.net/2012/05/quick-tip-skip-binding.html で説明しています。この手法を使用すると、ページ全体に対してビュー モデルをバインドできますがko.applyBindings、2 番目の引数として DOM 要素を使用して への呼び出しで個別にバインドする領域を切り取ることができます。

于 2012-12-08T13:18:43.953 に答える