3

Backbone アプリの一部として再利用可能なコンポーネントを作成したいと考えています。基本的に、次のことができるようにフォーム フィルター ヘルパーを作成したいと考えています。

  • ビューjsファイル内でfuncを呼び出します。これにより、変更をリッスンし、データの変更をトリガーしてビューを更新できるドロップダウンが作成されます。

最終的には、次のようなことができるようになりたいです。

// generic view.js

// to spawn a dropdown
formFilter('select', data);

// to spawn a series of checkboxes
formFilter('checkbox', data);

明らかに、モジュール コードはイベントをリッスンし、作業を処理します。

私の質問は、再利用可能なコンポーネントを作成する標準的な方法は何ですか? Google は私に多くを与えてくれませんし、#documentcloud IRC はあまり活発ではありません。

4

1 に答える 1

4

質問で提供した情報に基づいて、特定のコンポーネントをどのようにコンポーネント化するのが最適かを判断するのは簡単ではありません。ただし、再利用性のための強力な戦略の 1 つはmixinsです。

次のように、単純なオブジェクト リテラルでメソッドを定義するだけです。

Mixins.filterable = {
  filterForm: function(selector, data) {
    this.$(selector)...
  }
}

Mixins.sortable = {
  sortForm: function(selector) {
    this.$(selector)...
  }
}

そして、それらを anyViewのプロトタイプに混在させることができます:

_.extend(FooView.prototype, Mixins.filterable, Mixins.sortable);

mixin メソッドは、 のすべてのインスタンスで使用できるようになりますFooView。

render: function() {
  //..
  this.filterForm('select', this.model);
}

ミックスイン メソッドはビュー インスタンスのコンテキストにバインドされるため、ミックスイン メソッド内thisで および論理拡張によってを参照できthis.$elます。これにより、ビューのイベントをリッスンできるようになります。

Mixins.filterable = {
  filterForm: function(selector, data) {
    this.$(selector).on('change', this._handleFilterChange);
  },

  _handleFilterChange: function(e) {
    //..
  }      
}

メソッドをすべてのビューで使用できるようにするには、Backbone.View代わりにそれらをプロトタイプに混在させます。

_.extend(Backbone.View.prototype, Mixins.filterable, Mixins.sortable);
于 2013-02-02T21:15:31.240 に答える