3

次のシナリオを検討してください。

<ParentView>
     <FilterSubview></FilterSubview>
     <ListSubview></ListSubview>
</ParentView>

例を挙げると、フィルター付きのビュー（ユーザーは本、雑誌、またはその両方を表示するように選択できます）とアイテム付きのリストを表示するビューがあります。フィルタとリストの両方に対応するモデルがあります。フィルタ-何をフィルタリングできますか。リスト-すべてのアイテムのリスト。

ユースケース：ユーザーは完全なリストを表示し、目的のカテゴリのみを選択して結果をフィルタリングできます。

質問：

  • これらの2つのビューはどのように相互作用する必要がありますか？彼らはお互いを知っているべきですか、それとも親ビューがそれを処理するべきですか？
  • フィルターされたリストを表示するために誰が保存する必要がありますか？リストサブビューモデルを直接指定することも、親ビューで完全なリストをフィルタリングしてからレンダリングに渡すこともできます。
4

1 に答える 1

6

あなたの質問に対する正しい答えは1つではありませんが、ここでは一般的な慣用的な方法を説明しようと思います。

2つの兄弟ビューはお互いを知っているべきではありません。代わりに、ある種のメディエーターを介してイベントを介して対話する必要があります。あなたの場合、両方FilterViewとListSubView、両方のレンダリングを担当する共通の親ビューを共有しているため、親ビューにイベントを仲介させることができます。

var ParentView = Backbone.View.extend({
  initialize: function() {
      this.listenTo(this.filterView, "filter", this.filterChanged);
  },
  filterChanged: function(filterValue) {
      this.listSubView.filter(filterValue);
  }
});

var FilterView = Backbone.View.extend({
  events: {
      "change .filter" : "filterValueChanged"
  },
  filterValueChanged: function() {
      var filterValue = //get filter value...
      this.trigger("filter", filterValue);
  }
});

あるいは（できれば）、仲介者を切り取ってメディエーターパターンを使用することもできます。そのためには、お互いを知らないはずの当事者間でメッセージを渡すことが仕事である3番目のコンポーネントが必要です。Backbone 0.9.9を使用している場合は、そのようなメディエーターが組み込まれています。Backboneルートオブジェクトは、この目的のためにグローバルイベントバスとして機能します。

それで：

//ListSubView
this.listenTo(Backbone, "listfilterchanged", this.filterChanged);

//FilterView
Backbone.trigger("listfilterchanged", filterValue);

次に、リストデータの責任者は誰かという問題があります。私は最も専門的なコンポーネントを担当することを好む傾向がありますが、そのため、担当するコンポーネントは1つだけです。あなたの場合、それはListSubViewフィルタリングされたリストを管理する必要があることを意味しますParentViewが、それを操作する必要がない場合に限ります。それは単なる一般化ですので、一粒の塩でそれを取り、あなたのケースに合っていると感じることをしてください。

于 2013-01-16T20:35:36.097 に答える