3

リストに表示する項目がいくつかあるとします。リストには、すべてのアイテムをアイテム ビューとして集約するビューがあります。ここで、アイテム ビューでクリック イベントを処理する必要があり、その処理をリスト ビューに委任します。

コード例を見てみましょう。

ItemView = Backbone.View.extend({
    className: 'item',
    initialize: function() {
        this.$el.data('backbone-view', this);
    }
});

ビューオブジェクト自体をルート要素のプロパティとしてアタッチしていることに注意してください。これにより、ビューと要素の循環参照状況が本質的に作成されます。

ListView = Backbone.View.extend({
    initialize: function() {
        // contains the item views
        this.items = [];

        // click event delegation
        this.$el.click(_.bind(this._onClick, this));
    },

    addItem: function(v) {
        if ( !(v instanceof ItemView) ) return;

        this.items.push(v);
        this.$el.append(v.el);
    },

    _onClick: function(e) {
        var el = $(e.target).closest('.item'),
            view = el.data('backbone-view');

        // do something with the view
    }
});

これは、あらゆる種類のリスト ビューを処理する必要があるときはいつでも、非常に一般的なパターンです。

初期化時に項目に設定した data プロパティを介して、ハンドラーに項目ビューを戻しています。クリック イベントの処理の一部としてアイテムに対して実行したいことはビューに基づいているため、アイテム ビューを取得する必要があります。

またclosest、アイテム ビューが複雑で、クリック イベントの実際のターゲットがルート要素の子孫である可能性があるため、使用していることにも注意してください。

質問:dataプロパティを介してルート要素にビューをバインドするこの方法は正しいアプローチですか? 特にガベージ コレクションとメモリ リークを考慮する場合は? これより良いものはありますか？

4

1 に答える 1

1

子ビューでイベントをキャッチする必要があります。私の意見では、バックボーン ビューは、その要素とその子の DOM イベントのみを処理する必要があります。ビューがネストされている場合は、最も具体的なビューがイベントを処理する必要があります。

処理を親ビューに委譲したい場合は、 でバックボーン イベントをトリガーし、ItemViewでそれらをリッスンできListViewます。

ItemView = Backbone.View.extend({
  events: {
    "click":"onClick"
  },
  onClick: function() {
    //trigger a custom event, passing the view as first argument
    this.trigger('click', this);
  }
});

ListView = Backbone.View.extend({
  addItem: function(v) {
    if ( !(v instanceof ItemView) ) return;
    //listen to custom event
    this.listenTo(v, 'click', this._onClick);
    this.items.push(v);
    this.$el.append(v.el);
  },
  _onClick:function(itemView) {
    //...
  }
});

イベントがやclickなどの「より高いレベル」のアクションを表す場合は、カスタム イベントにそのような名前を付ける必要があります。このようにして、親とその子の実装の詳細を気にすることなく、ビュー間に論理的で堅牢なインターフェイスを作成できます。クリックされたか、ホバーされたか、ダブルクリックされたかなどを知る必要があります。selectactivateListViewItemView

于 2013-02-19T15:21:16.650 に答える