主干子视图事件未触发

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

进一步阅读

• 在 Backbone 中渲染视图并不总是那么简单作者： Ian Storm Taylor