1

フレームワークのない世界から Backbone.js に移行して、jQuery オブジェクトへの参照を (効率化のために) 常に格納することで、jQuery オブジェクトを「キャッシュ」するという慣行を取り入れました。

var myCachedEl = $('#element');
myCachedEl.on('click', function() {
  myCachedEl.html('That tickles.');
});

Backbone では、これが jQuery オブジェクトをキャッシュする方法です。

var RandomView = Backbone.View.extend({

  intitialize: function() {
    this.$lastRoll = this.$el.find('#last-roll');
    this.listenTo(this.model, 'change', this.render);
  },

  render: function() {
    this.$lastRoll.html(this.model.get('lastRoll'));
  },

  events: {
    'click #last-roll': function() {
      this.model.roll();
    }
  }
});

var randomView = new RandomView({
  el: '#random-view',
  model: random
});

私の現在の設定を考えると、次のようなことをしたいと思います...

events: {
    'click this.$lastRoll': function() {
      // ...
    }
}

...私のイベントでは、クリック イベントをキャッシュされた要素にバインドできました。ただし、上記の構文は機能しません。上記と同様の構文を使用できるように、サブ要素を「公式に」定義する方法があるのではないかと思います。

質問:現在のパターンの代わりに、ビューのサブ要素をキャッシュするための「より良い」、「よりクリーンな」、またはより「バックボーン セマンティック」なパターンはありますか?

4

1 に答える 1

2

要素を正しくキャッシュしています。簡単に言えば、イベント ハンドラーをバインドする構文は、質問で提案した方法では機能しません。働き方が違うからです。

定義するすべてのイベントは、子要素ではなくevents: { ... }、ビューのルート要素にバインドされます。ビュー内でイベントが発生すると、ルート要素までバブルアップし、そこでイベントの がセレクターと一致するかどうかをハンドラーが判断します。たとえば、コードでは次のようになります。ellast-rolltarget

events: {
    'click #last-roll': function...
}

クリック イベントを にバインドしRandomView、クリックが発生すると、ターゲットがlast-roll(つまり、セレクターと一致する) かどうかを確認し、これが true の場合、ハンドラーが呼び出されます。そのため、要素ではなくセレクターを渡します。効率がいいので、ぜひ行ってみてください。

イベントを他の要素にバインドする必要がある場合 (グローバル キー押下イベント処理documentなど) 、 jQueryまたは Backboneを使用できます。を使用すると、メモリ リークを防ぐためにビューを削除するときにを使用してハンドラーを登録解除することを忘れないでください。onlistenToonofflistenTo

于 2013-08-18T01:01:09.607 に答える