2011-12-28 12 views
5

Dentro de mis puntos de vista Backbone, en la función initialize hago cosas como:`patrón de on` a Backbone` event` de hash

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

Esto parece ir en contra de la convención de la espina dorsal de la utilización de events. Reescritura con la events de hash:

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

El problema está dentro de alcance fadeButton 's el valor de this no es el mismo que cuando se utiliza .on(). ¿Cuál es la forma correcta de hacerlo usando el hash events?

Respuesta

7

Al igual que Pablo dijo, Backbone automáticamente establece el contexto para las devoluciones de llamada de eventos a la vista en sí. Entonces, this en la devolución de llamada será la instancia de vista.

Así se puede obtener el efecto buscado mediante el uso de la función de selección de ámbito de la vista ...

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

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

... pero si usted tiene múltiples elementos con class "button" en su opinión, que va desaparecer toda de ellos, en cuyo caso siempre se puede utilizar el objeto de evento que le da jQuery para obtener el destino del evento:

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

Sí, estaba pensando en 'event.target' pero va en contra de la filosofía jQuery, y es asqueroso – Randomblue

0

Definió el hash de eventos correctamente.

Y para cada controlador de eventos definido, Backbone establece automáticamente el contexto de la vista. Entonces, this dentro de fadeButton es la vista, y usted querrá acceder al elemento de la vista.

El siguiente código muestra cómo debe actualizar la función fadeButton.

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

no es 'this.el' que debe desvaneció, pero los elementos interiores 'this.el' que tiene clase' .button'. – Randomblue