Backbone View: наследовать и расширять события от родителя

Question

Документация Backbone гласит:

Свойство events также может быть определено как функция, которая возвращает хеш событий, чтобы упростить программное определение ваших событий, а также наследовать их от родительских представлений..

Как наследовать события представления родителя и расширять их?

Родительское представление

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

Дочернее представление

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

Answer 1

Чтобы сделать это полностью в родительском классе и поддерживать хэш событий на основе функций в дочернем классе, чтобы дети могли быть независимыми от наследования (ребенок должен будет вызвать MyView.prototype.initialize, если он переопределяет 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);
    };
  }
});

Answer 2

Ух ты, здесь много ответов, но я решил предложить еще один.Если вы используете библиотеку BackSupport, она предлагает extend2.Если вы используете extend2, он автоматически позаботится о слиянии events (а также defaults и подобных свойств) для вас.

Вот небольшой пример:

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

Answer 3

Шаблон для этого, который мне нравится, - это изменение конструктора и добавление некоторых дополнительных функций:

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

});

Я предпочитаю этот метод, потому что вам не нужно указывать родительскую переменную, которая меньше,Я использую ту же логику для attributes и defaults.

Answer 4

Если вы уверены, что ParentView имеет события, определенные как объект, и вам не нужно определять события динамически в ChildView, можно еще больше упростить ответ soldier.moth, избавившись от функции и используя _.extend непосредственно:

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

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

Answer 5

Это решение CoffeeScript сработало для меня (и учитывает предложение @ soldier.moth):

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

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