2011-12-28 6 views
5

Wewnątrz moich poglądów kręgosłup, w funkcji initialize zrobić rzeczy jak:Przełożenie `on` wzór dla Backbone na` event` hash

initialize: function() { 
    $(this.el).on('click', '.button', function() { 
     $(this).fadeTo(0.5); 
    } 
} 

Wydaje się to sprzeczne z konwencją szkieletowej za korzystania events. Przepisywanie z events mieszania:

events: { 'click .button': 'fadeButton' }, 
fadeButton: function() { 
    $(this).fadeTo(0.5); 
} 

Problemem jest w środku zakresu fadeButton jest wartość this nie jest taki sam, jak przy zastosowaniu .on(). Jaki jest prawidłowy sposób to zrobić przy użyciu mieszania events?

Odpowiedz

7

Tak jak powiedział Paul, Backbone automatycznie ustawia kontekst dla wywołań zwrotnych zdarzeń dla samego widoku. Tak więc this w oddzwanianiu będzie instancją widoku.

Więc można uzyskać efekt zamierzają za pomocą scoped funkcję wyboru widoku za ...

events: { 
    'click .button': 'fadeButton' 
}, 

fadeButton: function() { 
    this.$('.button').fadeTo(0.5); 
} 

... ale jeśli masz wiele elementów z klasą "button" Państwa zdaniem, że będziemy zanikać wszystko z nich, w tym przypadku zawsze można użyć obiekt zdarzenia jQuery daje Ci uzyskać cel zdarzenia:

fadeButton: function (event) { 
    $(event.target).fadeTo(0.5); 
} 
+0

Tak, myślałem o 'event.target' ale to jest sprzeczne z filozofią jQuery i jest paskudne – Randomblue

0

Hasła zdarzeń zostały zdefiniowane poprawnie.

Dla każdego definiowanego programu obsługi zdarzenia Backbone automatycznie ustawia kontekst na widok. Tak więc this w widoku fadeButton jest widokiem, a będziesz chciał uzyskać dostęp do elementu widoku.

Poniższy kod pokazuje, w jaki sposób należy zaktualizować funkcję fadeButton.

fadeButton: function() { 
    $(this.el).fadeTo(0.5); 
} 
+0

To nie jest 'this.el' które powinny być wyblakły, ale elementy wewnątrz 'ten.el', który ma klasę' .button'. – Randomblue