1

为多次呈现的主干视图创建 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'))
4

2 回答 2

1

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

于 2012-10-15T14:30:54.510 回答
1

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

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/

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

于 2012-10-15T15:20:44.753 回答