动态添加视图时,事件不会绑定

Question

我有两个简单的视图,一个带有一个按钮,可以创建一个视图并将其附加到页面.新视图包含一个列表项,其中包含链接和我需要绑定到每个列表项的事件.我认为这里的问题是el对象:我在读取el对象的时候应该自动创建它没有在构造视图时定义？看到这个小提琴

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

Backbone自动将事件委托给view元素.因此,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/