События просмотра по умолчанию для Backbone

Можно ли создать набор событий по умолчанию, которые существуют в каждом представлении? Например, если каждое представление в моем приложении включает кнопку настроек

        events: {
            "click #settings" : "goSettings"
        },
        ...
        goSettings: function() {
            // settings show function
        });

Как я могу упаковать это событие, чтобы включить его в каждое представление в моем приложении?


person Philip Kirkbride    schedule 09.11.2013    source источник


Ответы (2)


Проблема в том, что View#extend просто перезаписывает существующие свойства, поэтому вы не можете поместить 'click #settings' в базовый класс и подкласс, который. Однако вы можете легко заменить extend чем-то своим, объединяющим events. Что-то вроде этого:

var B = Backbone.View.extend({
    events: {
        'click #settings': 'goSettings'
    }
}, {
    extend: function(properties, classProperties) {
        properties.events = _({}).extend(
            properties.events || { },
            this.prototype.events
        );
        return Backbone.View.extend.call(this, properties, classProperties);
    }
});

А затем расширьте B вместо Backbone.View для ваших представлений.

Демонстрация: http://jsfiddle.net/ambiguous/Kgh3V/

person mu is too short    schedule 09.11.2013

Вы можете создать базовое представление с событиями и функциями, а затем наследовать от него другие представления. Мне нравится описанный здесь шаблон, потому что его легко настроить и легко переопределить при необходимости: http://www.scottlogic.com/blog/2012/12/14/view-inheritance-in-backbone..html

Базовый вид выглядит так:

var BaseSearchView = function(options) {
  this.inheritedEvents = [];
  Backbone.View.call(this, options);
}

_.extend(BaseView.prototype, Backbone.View.prototype, {
  baseEvents: {},

  initialize: function(options) {
    // generic initialization here
    this.addEvents({
      "click #settings" : "goSettings"
    });
    this.initializeInternal(options);
  },

  render: function() {
    // generic render here
    this.renderInternal();
    return this;
  },

  events: function() {
    var e = _.extend({}, this.baseEvents);
    _.each(this.inheritedEvents, function(events) {
      e = _.extend(e, events);
    });
    return e;
  },

  addEvents: function(eventObj) {
    this.inheritedEvents.push(eventObj);
  },

  goSettings: function() {
        // settings show function
  }
});

BaseView.extend = Backbone.View.extend;

И ваши дочерние классы, как это:

var MyView = BaseView.extend({

  initializeInternal: function(options) {
    // do something
    // add event just for this child
    this.addEvents({
      "click #differentSettings" : "goSettings"
    });

  },
  renderInternal: function() {
    // do something
  }
});
person kielni    schedule 09.11.2013
comment
Спасибо за ответ, я не знаю, куда поместить первый кусок кода. Добавить его в новый файл BaseView.js или включить куда-то еще, например, в инициализацию или маршрутизатор? - person Philip Kirkbride; 09.11.2013
comment
Да, в своем собственном файле, включенном перед его дочерними представлениями. - person kielni; 09.11.2013