web-dev-qa-db-ja.com

マルチビューアプリケーション用のknockoutjsパターンの例

私は、2つの複雑な、かなり異なる（まだいくつかの共有コンポーネントを含む）ビューを含むアプリケーションを構築しています。 1つのビューでは、ユーザーがクエリを実行して検索結果を確認できます。もう1つのビューでは、最近のアクティビティの概要が表示されます。関連する例として、メール画面と連絡先画面を備えたPIMアプリがあります。2つの操作セットはまったく異なりますが、その間に構造的な類似点もあります。アプリケーションの検索結果ビューから始めましたが、今度は2番目のビューを作成する必要があり、コードを整理する際のベストプラクティスについて疑問に思っています。

アプリケーションの「ビュー」ごとに個別のオブジェクト（サブビューモデル、私は推測する）を作成し、if/ifnotバインディングでそれらを切り替えますか？ビュー間の共通点の1つは、それぞれにオブジェクトのスクロール可能、フィルター可能、ページング可能なリストがあることです。共通の並べ替え/フィルターUIを使用できるように、リスト間の違いを除外するか、カスタムバインディングのみを共有する2つの並列インターフェイスを作成する必要がありますか？

おかげで、

遺伝子

knockout.js
65
Gene Golovchinsky

あなたはこれで行くことができるいくつかの指示があります。

1つのオプションは、次のような個別のDOM要素に対して個別のビューモデルでko.applyBindingsを呼び出すことです。

var viewModelA = { name: "Bob" };
var viewModelB = { price: 50 };

ko.applyBindings(viewModelA, document.getElementById("aContainer"));
ko.applyBindings(viewModelB, document.getElementById("bContainer"));

http://jsfiddle.net/9abgxn8k/

この場合、要素がお互いの祖先ではないことを確認する必要があります（何も2回バインドしたくない）

別のオプションは、サブビューモデルを使用することです。

var subModelA = { name: "Bob" };
var subModelB = { price: 50 };

var viewModel = {
  subModelA: { name: "Bob" },
  subModelB: { price: 50 }
};

ko.applyBindings(viewModel);

このメソッドでは、各ビューモデルで表示する領域でwithバインディングを使用します。サブモデルまたは最上位モデルのフラグで可視性を制御できます。

私が気に入っているもう1つのオプションは、「ビュー」に少し構造を与え、次のようなことをすることです。

var View = function(title, templateName, data) {
   this.title = title;
   this.templateName = templateName;
   this.data = data; 
};

var subModelA = {
    items: ko.observableArray([
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
      ])
};

var subModelB = {
    firstName: ko.observable("Bob"),
    lastName: ko.observable("Smith") 
};


var viewModel = {
    views: ko.observableArray([
        new View("one", "oneTmpl", subModelA),
        new View("two", "twoTmpl", subModelB)
        ]),
    selectedView: ko.observable()    
};

ko.applyBindings(viewModel);

http://jsfiddle.net/rniemeyer/PctJz/

105
RP Niemeyer