Question

我有两个简单的视图，一个带有一个创建视图并将其附加到页面的按钮。新视图包含一个列表项，其中包含链接和我需要绑定到每个列表项的事件。我认为这里的问题是el对象：我在读取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

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/

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

1 个答案: