backbone.js - 动态添加 View 时事件不绑定(bind)

Question

我有两个简单的 View ，一个带有一个创建 View 并将其附加到页面的按钮。新 View 由一个带有链接的列表项和一个我需要绑定(bind)到每个列表项的事件组成。我认为这里的问题是 el 对象:我一直在阅读的 el 对象应该在 View 构造时未定义时自动创建？ 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

Backbone 自动将事件委托(delegate)给 View 元素。照原样，TaskView 中的 el 将指向未附加的 div(Backbone 创建的默认 el)，而不是列表中的元素。

解决方法很简单:通过将 tagName 设置为 li 并将此元素附加到主视图中，创建您的 subview 并将其 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);
    }
});

和更新的 fiddle http://jsfiddle.net/BLP6J/31/