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

Question

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

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

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

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

Но события из стандартных событий написаны по-разному:

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

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

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

Answer 1

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

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

Это происходит внутри setElement function (line 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") расщепляется с использованием регулярных выражений (line 1311).

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

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

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

и функция delegate (line 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; 
},