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＆＃39; .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; } });函数）：

{{1}}

进一步阅读

Rendering Views In Backbone Isn't Always Simple

Ian Storm Taylor

Backbone子视图事件未触发

1 个答案:

进一步阅读