Jak mogę dołączyć 2 procedury obsługi do tego samego zdarzenia?

Question

mogę dołączyć teleskopowe szkieletowej Wyświetleń jak:

var TodoView = Backbone.View.extend({ 
    events: { 
     "xxx": "eventHandler1" 
     "yyy": "eventHandler2" 
    } 
}); 

ale co jeśli chcę dołączyć więcej niż 1 do obsługi tego samego zdarzenia?

var TodoView = Backbone.View.extend({ 
    events: { 
     "xxx": "eventHandler1" 
     "yyy": "eventHandler2" 
     "xxx": "eventHandler3" // this isn't valid ... at least in CoffeeScript 
    } 
}); 

mogę utworzyć niestandardową procedurę obsługi jak

Ale to nie wydaje się idealny ...

Answer 1

to:

events: { 
    "xxx": "eventHandler1", 
    "yyy": "eventHandler2", 
    "xxx": "eventHandler3" 
} 

nie zadziała, ponieważ events jest literałem obiektu i możesz mieć co najwyżej jedną parę (klucz, wartość) w obiekcie. Że będzie prawdopodobnie tak samo jak powiedzenie:

events: { 
    "xxx": "eventHandler3", 
    "yyy": "eventHandler2" 
} 

Ten coffeescript:

events: 
    "xxx": "eventHandler1" 
    "yyy": "eventHandler2" 
    "xxx": "eventHandler3" 

jest funkcjonalnie identyczna z wersją JavaScript i nie będzie działać z tego samego powodu. Pomysł

Andy Ray korzystania

'event selector': 'callback1 callback2'` 

nie będzie działać albo jako Backbone nie zrozumie, że powinna ona podzielona na wartość spacji; podobnie:

'event selector': [ 'callback1', 'callback2' ] 

nie będzie działać, ponieważ Backbone nie wie, co zrobić z tablicą w tym kontekście.

Odwiedzin związać swoje imprezy przez delegateEvents i że wygląda tak:

delegateEvents: function(events) { 
    // Some preamble that doesn't concern us here... 
    for (var key in events) { 
    var method = events[key]; 
    if (!_.isFunction(method)) method = this[events[key]]; 
    if (!method) throw new Error('Method "' + events[key] + '" does not exist'); 
    // And some binding details that are of no concern either... 
    } 
} 

Więc method zaczyna się jako wartość 'event selector'.Jeśli jest to funkcja z podobnie jak:

'event selector': function() { ... } 

to jest ono wykorzystywane jak jest, w przeciwnym razie jest przekształcany na właściwości this:

method = this[events[key]]; // i.e. method = this[method] 

Gdyby pogrubienie, można było dopasować delegateEvents zrozumieć tablicę lub ciąg rozdzielany białe znaki:

// Untested code. 
var methods = [ ]; 
if (_.isArray(method)) 
    methods = method; 
else if (_.isFunction(method)) 
    methods = [ method ]; 
else 
    methods = method.split(/\s+/); 
for (var i = 0; i < methods.length; ++i) { 
    method = methods[i]; 
    if (!_.isFunction(method)) 
    method = this[method]; 
    // And the rest of the binding stuff as it is now with a possible adjustment 
    // to the "method does not exist" exception message... 
} 

dość prosty jak plaster, który pozwoliłby na użycie białymi ograniczoną listę teleskopowe:

'event selector': 'callback1 callback2' 

lub tablicą teleskopowe:

'event selector': [ 'callback1', 'callback2' ] 

lub nawet mieszany tablicę nazw metod i funkcje:

'event selector': [ 'callback_name1', function() { ... }, 'callback_name2' ] 

Jeśli nie chcesz załatać swój Backbone lub przekazania taką łatkę dla opiekunów kręgosłupa, możesz wtedy użyć oryginalnego pomysłu "ręcznego wysyłania":

'event selector': 'dispatcher' 
//... 
dispatcher: function(ev) { 
    this.handler1(ev); 
    this.handler2(ev); 
} 

Answer 2

I rozwiązać ten problem za pomocą jQuery's event namespaces

var TodoView = Backbone.View.extend({ 
    events: { 
     "xxx.handler1": "eventHandler1", 
     "yyy": "eventHandler2", 
     "xxx.handler3": "eventHandler3" 
    } 
}); 

To jest nie to, co wydarzenie nazw pierwotnie przeznaczony do, ale tak długo, jak nie kolidować z innymi przestrzeniami nazw nie powinien powodować problem.

Głównym problemem jest to, że możesz mieć tylko jedną wartość na klucz w obiekcie, co czyni klawisze unikalnymi.