使用主干视图管理 jQuery 点击事件

Question

为多次呈现的主干视图创建 jQuery 点击事件的最佳方法是什么？看来我应该在视图的初始化程序中使用 $().on() ，但这不起作用，除非我在渲染后调用它。

基本上，我正在渲染一个表格，并检查行上的点击事件。这是我正在尝试的（在咖啡脚本中）。这不起作用 -

class MyGridView extends Backbone.View
  el: '#myGrid'
  template: _.template(TableTmpl)

  initialize: -> 
    # $('tr',@el).on 'click', -> console.log($(@).attr('model')) # WRONG
    $(@el).on 'click', 'tr', -> console.log($(@).attr('model')) # CORRECT

  render: ->
    $(@el).empty()
    $(@el).append(@template({data: @collection.getPage()}))

这可行，但这会创建孤立的点击事件吗？

class MyGridView extends Backbone.View
  el: '#myGrid'
  template: _.template(TableTmpl)

  render: ->
    $(@el).empty()
    $(@el).append(@template({data: @collection.getPage()}))
    $('tr',@el).click -> console.log($(@).attr('model'))

更新：

我缺少 $().on() 的参数，这就是它不起作用的原因。我还尝试了事件，这似乎是一种更好的处理方式，其工作方式如下：

class MyGridView extends Backbone.View
  el: '#myGrid'
  template: _.template(TableTmpl)
  events: {'click tr', 'selectModel'}

  selectModel: ->
    model = $(e.target).parent().attr('model')
    console.log(model)

  render: ->
    $(@el).empty()
    $(@el).append(@template({data: @collection.getPage()}))
    $('tr',@el).click -> console.log($(@).attr('model'))

Answer 1

您应该为此使用events property，这就是它的用途：

class MyGridView extends Backbone.View
  el: '#myGrid'
  events:
    'click tr': 'click'
  template: _.template(TableTmpl)
  render: ->
    @$el.empty()
    @$el.append(@template({data: @collection.getPage()}))
    @
  click: ->
    console.log($(@).attr('model'))

还要注意切换到@$el，因为Backbone 已经缓存了jQuery 包装的el，并且render 通常会返回视图。此外，Backbone 视图有一个$ 方法，它是@$el.find(...) 的快捷方式，因此您可以说@$('tr') 而不是$('tr', @el)。

演示：http://jsfiddle.net/ambiguous/ud6dU/

无需手动绑定事件（在大多数情况下）。视图使用视图的events 和附加到视图的el 的jQuery delegate 为您处理所有这些。

Answer 2

我认为您应该使用live 而不是on，或者您应该使用主干的events 对象。