Question

我正在尝试覆盖已继承的事件。我从here

得到了这个想法

但无论我尝试什么，都不会取代原来的事件：

父视图：

SD.defaultView = function(){ //Default controller for all views
    //extend the view with the default home view
    var HomeView = Backbone.View.extend({
        el: 'body > shell',
        events: { //Add click events for global clicks
            'click footer saveBox': 'saveBox',
        },
        render: function () {
            //make sure we are logged in, if we are not forward back to home page
            SD.login.checkLoginState();

            //Output correct tempalte
            this.$el.html(templatesNeeded);
        },
        saveBox: function(){
            //Now we have added the who reload the sex details page.
            SD.pageLoad(SD.CURRENTSEX);
        },
    });
    SD.DV = new HomeView();
    SD.DV.render();
    return HomeView;
}();

子视图：

//set up homeview
var whoAdd = SD.defaultView.extend({
    el: 'page',
    events: function(){
        return _.extend({},SD.defaultView.prototype.events,{
            'keyup #who': 'otherFunctions',
            'click addContact': 'otherFunctions',
            'click footer saveBox' : 'addWho'
        });
    },
    template: JST['app/www/js/templates/details/whoAdd.ejs'],
    addWho: function(el){
        c(el);
    },
    render: function () {
        myself = this;
        this.$el.html(this.template);
        $('save').addClass('disabled');
        SD.setTitle('Who was involved?');
    }
});

目前saveBox将正常绑定。然而，我所看到的所有例子并没有像我一样发起观点。我从一个自执行函数返回视图，虽然这不应该导致问题，我认为可能继承已经在某个地方搞砸了。

Answer 1

您的想法很可靠，代码只有一些问题。我根据您的想法创建了this working jsfiddle。它显示了父 - ＆gt;子视图类共享一个事件。

您的问题标题提到“覆盖继承的事件”。你会注意到，在jsfiddle中，子视图实际上会覆盖父事件。我必须在子进程中手动调用父进程的事件处理程序才能运行它。

以下是对代码的修改，使其更像是jsfiddle

var SD = {};

SD.DefaultView = (function(){ //Default controller for all views
    //extend the view with the default home view
    var HomeView = Backbone.View.extend({
        …
        events: { //Add click events for global clicks
            'click footer saveBox': 'saveBox',
        }
        …
    });
    return HomeView;
})();

//set up homeview
SD.WhoAddView = (function () {
    var WhoAddView = SD.DefaultView.extend({
        …
        events: function(){
            return _.extend({},SD.DefaultView.prototype.events,{
                'keyup #who': 'otherFunctions',
                'click addContact': 'otherFunctions',
                'click footer saveBox' : 'addWho'
            });
        }
        …
    });
    return WhoAddView;
})();

…

var view = new SD.WhoAddView();
$('body').append(view.render().el);

Answer 2

您的发起关于定义的父视图是问题所在。

父视图的click事件会在父视图中进行初始化时添加。

在子视图中，当您需要父视图扩展它时，您实际上正在返回已经在父元素中添加了单击处理程序的实例化对象。

一旦扩展了子对象中的父对象，由于单击处理程序已经绑定，您只需在父对象中添加另一个单击处理程序。

如果未在定义上实例化父视图，则扩展事件应按计划运行。

Backbone View不会覆盖继承的事件

2 个答案: