Backbone View: hériter et étendre les événements du parent

Question

La documentation de Backbone indique:

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

Comment héritez-vous les événements de vue d'un parent et les étendre?

Parent View

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

Enfant Voir

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

Answer 1

Un moyen 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 fonction ou objet

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

Answer 2

La réponse soldier.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 les deux classes de la manière habituelle.

Answer 3

Vous pouvez également utiliser la méthode pour éviter de créer l’objet vide .

Answer 4

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

Answer 5

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