Backbone View won't overwrite inherited event

Question

I am trying to overwrite an event that has been inherited. I got the idea from here

However no matter what I try it will not replace the original event:

Parent View:

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

The child view:

//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?');
    }
});

Currently saveBox will be bound as normal. However all the examples I have seen don't initiate views quite the same way I do. I return the view from a self executing function, whilst this shouldn't cause problems I thought maybe inheritance has been messed up somewhere along the lines.

Did either of the answers help? – Jonathan Beebe Mar 01 '14 at 17:03 — Jonathan Beebe, Mar 01 '14 at 17:03

score 1 · Answer 1 · answered Feb 27 '14 at 12:04

Your idea is solid, there are just a few problems with the code. I created this working jsfiddle based on your idea. It shows parent -> child view classes sharing an event.

Your question title mentions "overwrite inherited event". You'll notice in the jsfiddle the child view does in fact overwrite the parent event. I had to manually call the parent's event handler within the child in order for it to run.

Here is a reworking of your code to be more like the 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);

score 0 · Answer 2 · answered Feb 26 '14 at 17:14

Your initiating of the parent view on definition is the problem.

The parent view's click event gets added on initialization which you are doing within the parent view.

In the child view, when you require the parent view to extend it you actually are getting back the instantiated object which would have already added the click handler in the parent element.

Once you extend the parent object in the child, since the click handler is already bound, you are merely adding another click handler on top of the one you've added in the parent.

If you do not instantiate the parent view on definition, extending the events should work as planned.

Backbone View won't overwrite inherited event

2 Answers2