動態添加視圖時事件不會綁定

Question

我有兩個簡單的視圖，一個是創建視圖並將其追加到頁面的按鈕。新視圖由一個帶有鏈接的單個列表項和一個需要綁定到每個列表項的事件組成。我認爲這裏的問題是el對象：當我沒有在視圖的構造中定義它時，我應該自動創建的對象是什麼？ See this fiddle

HTML：

<div id="main"> 
    <button type="button" class="add">Add view</button> 
    <ul id="tasks" /> 
</div> 

<script id="view-template-new-task" type="text/html"> 
    <li><a href="#" class="fire">Task</a></li> 
</script> 
​ 

JS：

var TaskView = Backbone.View.extend({ 
    events: { 
     'click a.fire': 'fire' 
    }, 
    fire: function() { 
     alert('fire'); 
    }, 
    initialize: function() { 
     this.template = _.template($('#view-template-new-task').html()); 
    }, 
    render: function() { 
     $('#tasks').append(this.template()); 
    }   
}); 
var View = Backbone.View.extend({ 
    events: { 
     'click button.add': 'addView' 
    }, 
    addView: function(e) { 
     var task = new TaskView(); 
     task.render(); 
    } 
}); 
$(function() { 
    var view = new View({ 
     el: $('#main') 
    }); 
});​ 

Answer 1

骨幹自動委託的事件的視圖元素。因爲，你的TaskView中的el會指向一個未連接的div（由Backbone創建的默認el），而不是指向列表中的元素。

治癒很簡單：通過設置tagName爲li並將此元素添加到主視圖中，將其設置爲正確的DOM節點的子視圖。

var TaskView = Backbone.View.extend({ 
    tagName: 'li', 

    events: { 
     'click a.fire': 'fire' 
    }, 

    fire: function() { 
     alert('fire'); 
    }, 

    initialize: function() { 
     this.template = _.template($('#view-template-new-task').html()); 
    }, 

    render: function() { 
     this.$el.html(this.template()); 
     return this; 
    }   
}); 

var View = Backbone.View.extend({ 

    events: { 
     'click button.add': 'addView' 
    }, 

    addView: function(e) { 
     var task = new TaskView(); 
     this.$('#tasks').append(task.render().el); 
    } 
}); 

和更新的小提琴http://jsfiddle.net/BLP6J/31/