Search code examples
backbone.js

Backbone view override parent event function


Is it possible to override closeClick function in child view? When .close is clicked, only run child's closeClick function instead of the parent.

var ParentView = Backbone.View.extend({
 events:{
    "click .close": "closeClick"
 },

 closeClick: function(){
    //do parent stuff
 }
});

var ChildView = ParentView.extendable.extend({
  events:{
    "click .close": "closeClick",
    //more child events
  },

  closeClick: function(){
     //only do child stuff not parent when .close is clicked
  }
});

Solution

  • What you have written will work fine with normal Backbone .extend. Don't know what this strange extendable statement is though - that's probably what's breaking it.

    var ParentView = Backbone.View.extend({
     events: {
        "click .close": "closeClick"
     },
    
     closeClick: function(){
        //do parent stuff
     }
    });
    
    var ChildView = ParentView.extend({
      events: function() {
        var parentEvents = _.result(ParentView.prototype, 'events');
        return _.extend({
            'keyup input': 'someOtherChildEvent'
        }, parentEvents);
      },
    
      closeClick: function() {
         //only do child stuff not parent when .close is clicked
      }
    });