Backbone 子视图事件未触发

Question

出于某种原因，我的视图事件没有触发，我不知道出了什么问题...

代码如下：

TasksView = ****.Views.BaseView.extend({
    id: 'log-container',
    className: 'row-fluid',
    initialize : function(){
        this.task_selection_view = new TaskSelectionView();
    },
    remove : function(){
        this.task_selection_view.remove();
        Backbone.View.prototype.remove.call(this);
    },
    render : function(){
        $(this.el).html(Templates['log/log']);
        $('#selection',this.el).append(this.task_selection_view.render().el);
        return this;
    }
});


TaskSelectionView = ****.Views.BaseView.extend({
    className : 'row-fluid',
    events : {
        'click #fire' : 'fire'
    },
    render: function(){
        $(this.el).html(Templates['log/task_selection']);
        return this;
    },
    fire : function(event){
        event.preventDefault();
        console.log('fire');
    }
});

log 模板：

<div id="selection"></div>

task_selection 模板：

<button id="fire" class="btn btn-default">fire</button>

我尝试了很多东西，但无法理解问题所在...

Answer 1

发生这种情况是因为您在不知不觉中解除了子视图事件的绑定。对 jQuery 的 .html() 的调用将在幕后调用 .empty()，这将分离绑定到（子视图的）元素的任何 DOM 事件。

这就是调用 this.delegateEvents() 时问题得到解决的原因。您可以通过调用 subview.setElement() 优雅地解决这个问题，它会为您调用 .delegateEvents()。

在您的主视图中，只需替换：

$('#selection',this.el).append(this.task_selection_view.render().el);

与：

this.task_selection_view.setElement(this.$('#selection')).render();

这是上下文中的那一行（参见 render 函数）：

TasksView = ****.Views.BaseView.extend({
    id: 'log-container',
    className: 'row-fluid',
    initialize: function () {
        this.task_selection_view = new TaskSelectionView();
    },
    remove: function () {
        this.task_selection_view.remove();
        Backbone.View.prototype.remove.call(this);
    },
    render: function () {
        $(this.el).html(Templates['log/log']);
        this.task_selection_view.setElement(this.$('#selection')).render();
        return this;
    }
});

进一步阅读

Rendering Views In Backbone Isn't Always Simple 作者：Ian Storm Taylor

Backbone 子视图事件未触发

Backbone subview events not firing

javascript

events

backbone.js

进一步阅读