Question

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

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

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

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

Answer 2

你应该使用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已经缓存了el jQuery并且render通常会返回视图。此外，Backbone视图的$方法是@$el.find(...)的快捷方式，因此您可以说@$('tr')而不是$('tr', @el)。

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

没有必要乱用手动绑定事件（在大多数情况下）。视图使用视图的events和附加到视图el的jQuery delegate来处理所有这些内容。

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

2 个答案: