Разница между событиями и DelegateEvents?

Question

Я читаю документы для Views, и я не понимаю, какая разница между events а также delegateEvents, Кажется, их обоих называют events метод на объекте View.

Непонятная часть для меня - это то, что ключ должен быть внутри events хэш.

Из документов:

delegateEvents([events]) Использует JQuery's on функция для предоставления декларативных обратных вызовов для событий DOM в представлении. Если events хеш не передается напрямую, использует this.events как источник События пишутся в формате {"event selector": "callback"}

Но события из стандартных событий пишутся иначе:

var InputView = Backbone.View.extend({
  tagName: 'input',

  events: {
    "keydown" : "keyAction",   
  },

Так, как события должны быть написаны? Можете ли вы объединить два синтаксиса?

Answer 1

delegateEvents это функция в представлении, которая вызывается для применения событий из events просмотреть недвижимость.

Опуская selector заставляет событие быть связанным с корневым элементом представления (this.el). По умолчанию, delegateEvents вызывается в конструкторе View для вас, так что если у вас есть простой events хэш, все ваши события DOM всегда будут связаны, и вам никогда не придется вызывать эту функцию самостоятельно.

Это происходит внутри setElement функция ( строка 1273):

setElement: function(element) {
  this.undelegateEvents();
  this._setElement(element);
  this.delegateEvents();
  return this;
},

Таким образом, синтаксис одинаков, и оба синтаксиса работают.

var InputView = Backbone.View.extend({
  events: {
    // keydown event from ".sub-element", which must be a child of the view's root
    "keydown .sub-element" : "keyAction", 
    "keydown" : "keyAction", // keydown event from the root element
  },
});

Внутри delegateEvents функция, key (например "keydown .sub-element") разделяется с помощью регулярного выражения ( строка 1311).

var match = key.match(delegateEventSplitter);
this.delegate(match[1], match[2], _.bind(method, this));

Регулярное выражение для отделения события от селектора ( строка 1227):

// Cached regex to split keys for `delegate`.
var delegateEventSplitter = /^(\S+)\s*(.*)$/;

И delegate функция ( строка 1317):

// Add a single event listener to the view's element (or a child element
// using `selector`). This only works for delegate-able events: not `focus`,
// `blur`, and not `change`, `submit`, and `reset` in Internet Explorer.
delegate: function(eventName, selector, listener) {
  this.$el.on(eventName + '.delegateEvents' + this.cid, selector, listener);
  return this;
},