Vue dorsale: hériter et étendre les événements du parent

La documentation de Backbone indique:

La propriété events peut également être définie comme une fonction qui renvoie un hachage d'événements, pour faciliter la définition par programme de vos événements, ainsi que pour les hériter des vues parent.

Comment héritez-vous des événements d'affichage d'un parent et comment les étendez-vous?

Vue parent

var ParentView = Backbone.View.extend({
   events: {
      'click': 'onclick'
   }
});

Vue enfant

var ChildView = ParentView.extend({
   events: function(){
      ????
   }
});

Une façon est:

var ChildView = ParentView.extend({
   events: function(){
      return _.extend({},ParentView.prototype.events,{
          'click' : 'onclickChild'
      });
   }
});

Un autre serait:

var ParentView = Backbone.View.extend({
   originalEvents: {
      'click': 'onclick'
   },
   //Override this event hash in
   //a child view
   additionalEvents: {
   },
   events : function() {
      return _.extend({},this.originalEvents,this.additionalEvents);
   }
});

var ChildView = ParentView.extend({
   additionalEvents: {
      'click' : ' onclickChild'
   }
});

Pour vérifier si les événements sont une fonction ou un objet

var ChildView = ParentView.extend({
   events: function(){
      var parentEvents = ParentView.prototype.events;
      if(_.isFunction(parentEvents)){
          parentEvents = parentEvents();
      }
      return _.extend({},parentEvents,{
          'click' : 'onclickChild'
      });
   }
});

La réponse du soldat.moth est bonne. En simplifiant davantage, vous pouvez simplement faire ce qui suit

var ChildView = ParentView.extend({
   initialize: function(){
       _.extend(this.events, ParentView.prototype.events);
   }
});

Ensuite, définissez simplement vos événements dans l'une ou l'autre classe de la manière habituelle.

Vous pouvez également utiliser la defaultsméthode pour éviter de créer l'objet vide {}.

var ChildView = ParentView.extend({
  events: function(){
    return _.defaults({
      'click' : 'onclickChild'
    }, ParentView.prototype.events);
  }
});

Si vous utilisez CoffeeScript et définissez une fonction sur events, vous pouvez utiliser super.

class ParentView extends Backbone.View
  events: ->
    'foo' : 'doSomething'

class ChildView extends ParentView
  events: ->
    _.extend {}, super,
      'bar' : 'doOtherThing'

Ne serait-il pas plus facile de créer un constructeur de base spécialisé à partir de Backbone.View qui gère l'héritage des événements dans la hiérarchie.

BaseView = Backbone.View.extend {
    # your prototype defaults
},
{
    # redefine the 'extend' function as decorated function of Backbone.View
    extend: (protoProps, staticProps) ->
      parent = this

      # we have access to the parent constructor as 'this' so we don't need
      # to mess around with the instance context when dealing with solutions
      # where the constructor has already been created - we won't need to
      # make calls with the likes of the following:   
      #    this.constructor.__super__.events
      inheritedEvents = _.extend {}, 
                        (parent.prototype.events ?= {}),
                        (protoProps.events ?= {})

      protoProps.events = inheritedEvents
      view = Backbone.View.extend.apply parent, arguments

      return view
}

Cela nous permet de réduire (fusionner) le hachage des événements dans la hiérarchie chaque fois que nous créons une nouvelle 'sous-classe' (constructeur enfant) en utilisant la fonction d'extension redéfinie.

# AppView is a child constructor created by the redefined extend function
# found in BaseView.extend.
AppView = BaseView.extend {
    events: {
        'click #app-main': 'clickAppMain'
    }
}

# SectionView, in turn inherits from AppView, and will have a reduced/merged
# events hash. AppView.prototype.events = {'click #app-main': ...., 'click #section-main': ... }
SectionView = AppView.extend {
    events: {
        'click #section-main': 'clickSectionMain'
    }
}

# instantiated views still keep the prototype chain, nothing has changed
# sectionView instanceof SectionView => true 
# sectionView instanceof AppView => true
# sectionView instanceof BaseView => true
# sectionView instanceof Backbone.View => also true, redefining 'extend' does not break the prototype chain. 
sectionView = new SectionView { 
    el: ....
    model: ....
} 

En créant une vue spécialisée: BaseView qui redéfinit la fonction d'extension, nous pouvons avoir des sous-vues (comme AppView, SectionView) qui souhaitent hériter des événements déclarés de leur vue parente, faites-le simplement en étendant à partir de BaseView ou de l'un de ses dérivés.

Nous évitons la nécessité de définir par programme nos fonctions d'événement dans nos sous-vues, qui dans la plupart des cas doivent faire référence explicitement au constructeur parent.

Version courte de la dernière suggestion de @ soldier.moth:

var ChildView = ParentView.extend({
  events: function(){
    return _.extend({}, _.result(ParentView.prototype, 'events') || {}, {
      'click' : 'onclickChild'
    });
  }
});

Cela fonctionnerait également:

class ParentView extends Backbone.View
  events: ->
    'foo' : 'doSomething'

class ChildView extends ParentView
  events: ->
    _.extend({}, _.result(_super::, 'events') || {},
      'bar' : 'doOtherThing')

Utiliser straight superne fonctionnait pas pour moi, c'était non plus spécifier manuellement leParentView classe ou héritée.

Accès au _supervar qui est disponible dans n'importe quel coffeescriptClass … extends …

// ModalView.js
var ModalView = Backbone.View.extend({
	events: {
		'click .close-button': 'closeButtonClicked'
	},
	closeButtonClicked: function() { /* Whatever */ }
	// Other stuff that the modal does
});

ModalView.extend = function(child) {
	var view = Backbone.View.extend.apply(this, arguments);
	view.prototype.events = _.extend({}, this.prototype.events, child.events);
	return view;
};

// MessageModalView.js
var MessageModalView = ModalView.extend({
	events: {
		'click .share': 'shareButtonClicked'
	},
	shareButtonClicked: function() { /* Whatever */ }
});

// ChatModalView.js
var ChatModalView = ModalView.extend({
	events: {
		'click .send-button': 'sendButtonClicked'
	},
	sendButtonClicked: function() { /* Whatever */ }
});

http://danhough.com/blog/backbone-view-inheritance/

Pour Backbone version 1.2.3, __super__fonctionne très bien et peut même être enchaîné. Par exemple:

// A_View.js
var a_view = B_View.extend({
    // ...
    events: function(){
        return _.extend({}, a_view.__super__.events.call(this), { // Function - call it
            "click .a_foo": "a_bar",
        });
    }
    // ...
});

// B_View.js
var b_view = C_View.extend({
    // ...
    events: function(){
        return _.extend({}, b_view.__super__.events, { // Object refence
            "click .b_foo": "b_bar",
        });
    }
    // ...
});

// C_View.js
var c_view = Backbone.View.extend({
    // ...
    events: {
        "click .c_foo": "c_bar",
    }
    // ...
});

... ce qui - en A_View.js- entraînera:

events: {
    "click .a_foo": "a_bar",
    "click .b_foo": "b_bar",
    "click .c_foo": "c_bar",
}

J'ai trouvé des solutions plus intéressantes dans cet article

Il utilise le super du Backbone et le hasOwnProperty d'ECMAScript. Le deuxième de ses exemples progressifs fonctionne comme un charme. Voici un peu un code:

var ModalView = Backbone.View.extend({
    constructor: function() {
        var prototype = this.constructor.prototype;

        this.events = {};
        this.defaultOptions = {};
        this.className = "";

        while (prototype) {
            if (prototype.hasOwnProperty("events")) {
                _.defaults(this.events, prototype.events);
            }
            if (prototype.hasOwnProperty("defaultOptions")) {
                _.defaults(this.defaultOptions, prototype.defaultOptions);
            }
            if (prototype.hasOwnProperty("className")) {
                this.className += " " + prototype.className;
            }
            prototype = prototype.constructor.__super__;
        }

        Backbone.View.apply(this, arguments);
    },
    ...
});

Vous pouvez également le faire pour l' interface utilisateur et les attributs .

Cet exemple ne prend pas en charge les propriétés définies par une fonction, mais l'auteur de l'article propose une solution dans ce cas.

Pour faire cela entièrement dans la classe parent et prendre en charge un hachage d'événements basé sur une fonction dans la classe enfant afin que les enfants puissent être indépendants de l'héritage (l'enfant devra appeler MyView.prototype.initializes'il remplace initialize):

var MyView = Backbone.View.extend({
  events: { /* ... */ },

  initialize: function(settings)
  {
    var origChildEvents = this.events;
    this.events = function() {
      var childEvents = origChildEvents;
      if(_.isFunction(childEvents))
         childEvents = childEvents.call(this);
      return _.extend({}, MyView.prototype.events, childEvents);
    };
  }
});

Cette solution CoffeeScript a fonctionné pour moi (et prend en compte la suggestion de @ soldier.moth):

class ParentView extends Backbone.View
  events: ->
    'foo' : 'doSomething'

class ChildView extends ParentView
  events: ->
    _.extend({}, _.result(ParentView.prototype, 'events') || {},
      'bar' : 'doOtherThing')

Si vous êtes sûr que les ParentViewévénements sont définis comme objet et que vous n'avez pas besoin de définir les événements dynamiquement, ChildViewil est possible de simplifier davantage la réponse de soldier.moth en supprimant la fonction et en utilisant _.extenddirectement:

var ParentView = Backbone.View.extend({
    events: {
        'click': 'onclick'
    }
});

var ChildView = ParentView.extend({
    events: _.extend({}, ParentView.prototype.events, {
        'click' : 'onclickChild'
    })
});

Un modèle pour cela que j'aime beaucoup est la modification du constructeur et l'ajout de fonctionnalités supplémentaires:

// App View
var AppView = Backbone.View.extend({

    constructor: function(){
        this.events = _.result(this, 'events', {});
        Backbone.View.apply(this, arguments);
    },

    _superEvents: function(events){
        var sooper = _.result(this.constructor.__super__, 'events', {});
        return _.extend({}, sooper, events);
    }

});

// Parent View
var ParentView = AppView.extend({

    events: {
        'click': 'onclick'
    }

});

// Child View
var ChildView = ParentView.extend({

    events: function(){
        return this._superEvents({
            'click' : 'onclickChild'
        });
    }

});

Je préfère cette méthode car vous n'avez pas à identifier la variable parent-one less pour changer. J'utilise la même logique pour attributeset defaults.

Wow, beaucoup de réponses ici mais je pensais en offrir une de plus. Si vous utilisez la bibliothèque BackSupport, elle propose extend2. Si vous l'utilisez, extend2il s'occupe automatiquement de la fusion events(ainsi quedefaults des propriétés similaires) pour vous.

Voici un exemple rapide:

var Parent = BackSupport.View.extend({
    events: {
        change: '_handleChange'
    }
});
var Child = parent.extend2({
    events: {
        click: '_handleClick'
    }
});
Child.prototype.events.change // exists
Child.prototype.events.click // exists

https://github.com/machineghost/BackSupport