用主幹視圖管理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')) 

UPDATE：

我缺少一個參數$（）的（），這就是爲什麼它沒有工作。我也嘗試過的事件，這似乎是處理這更好的方式，這工作就像：

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因爲骨幹已經擁有jQuery的包裹el緩存和render通常返回的視圖。此外，Backbone視圖有一個$方法，它是@$el.find(...)的快捷方式，因此您可以說@$('tr')而不是$('tr', @el)。

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

沒有必要浪費時間與人工結合的活動（在大多數情況下）。視圖使用視圖的events和附加到視圖的el的jQuery delegate來照顧您的所有內容。

Answer 2

我認爲你應該要麼使用live而不是on或者你應該使用骨幹events對象。