Backbone.js 动态添加视图时，事件不绑定

我有两个简单的视图，一个带有按钮，可以创建视图并将其附加到页面。新视图由一个带有链接的列表项和一个我需要绑定到每个列表项的事件组成。我认为这里的问题是el对象：我一直在读的el对象应该自动创建，而不是在构建视图时定义它

HTML:

---

主干自动将事件委托给视图元素。照原样，TaskView中的el将指向一个未附加的div（主干创建的默认el），而不是列表中的元素

解决方法很简单：通过将标记名设置为li并在主视图中附加此元素，创建子视图，使其el设置为正确的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);
    }
});

---

和一个更新的提琴，我明白了，但el不应该指向一个特定的视图，在我的例子中是一个列表项而不是完整的列表吗？在更新的提琴中，如果您添加两个任务并单击链接“两个锚都开火”。@Marcus，您是对的，我不知道我脑子里想的是什么。更正。

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')
    });
});​

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);
    }
});