0

私は十分に単純なイベントオブジェクトを持つビューを持っています（それは甘いのでcoffeescriptで）

APP.bb.Recipe_Index = Backbone.View.extend

    template: JST['templates/Recipe_Index']

    el: $ "#recipes"

    events:
        'click a' : 'testFunction'

    testFunction: () ->
        console.log 'test called'
        return 'this function'

私のイベントはバインドされていません。縮小されていない 0.5.3 Backbone.js ファイルの 967 行目に到達すると

delegateEvents : function(events) {
  //snip
  for (var key in events) {
    var method = this[events[key]];
    if (!method) throw new Error('Event "' + events[key] + '" does not exist');
    var match = key.match(eventSplitter);
    var eventName = match[1], selector = match[2];
    method = _.bind(method, this);
    eventName += '.delegateEvents' + this.cid;
    if (selector === '') {
      $(this.el).bind(eventName, method);
    } else {
      $(this.el).delegate(selector, eventName, method);  <-- THIS ONE
    }
  }
},

Chrome にブレークポイントを設定すると、jQuery 構文が正しくなくなります。

selector == 'a'
eventName == click.delegateEventsview8'
method == 'function() {[native code]}'

セレクターは正しいのですが、なぜ 963 行目にイベント タイプを示す「クリック」文字列が追加されているのかわかりません。メソッドは、アンダースコアでバインドされる前に my method として読み取られるconsole.logので、正しいです。

最終結果は、私のイベントがトリガーされないということです。ここで何が間違っているのか疑問に思います。

4

1 に答える 1

3

イベント名click.delegateEventsview8は、実際には jQuery イベントの正しい値です。Backbone は、jQuery の名前空間イベント機能を使用しています。(詳細はこちら)

バックボーンは名前空間イベントを使用しているため、関数に追加したすべてのイベントを簡単にバインド解除できundelegateEventsます。名前空間を使用することで、Backbone は追加したイベントのみをアンバインドすることができます。そうすれば、追加しなかったイベントのバインドが解除されることはありません。

undelegateEvents : function() {
  $(this.el).unbind('.delegateEvents' + this.cid);
},

イベントがトリガーされない理由については、わかりません。

テンプレートがビューにレンダリングされた後、render メソッドにクリック イベントを手動で追加してみて、elそれが呼び出されるかどうかを確認してください。そうでない場合は、セレクターに何か問題があることがわかります。

render: function() {
  $(this.el).append(//your template code)
  this.$('a').click(this.testFunction);
}
于 2011-12-31T12:32:38.847 に答える