jquery - source - underscore js download

Backbone.js Event Binding

Question

Estoy usando Backbone.js tengo un elemento de IU de tipo de control segmentado para la vista de cada modelo. Cada uno está hecho de una ul con algunos elementos de li. Quiero vincular un evento de tal manera que cuando se haga clic en uno de estos elementos, pueda determinar en cuál se ha hecho clic y actualizar el modelo con el valor apropiado.

El problema es que Backbone enlaza los eventos (estos están en el hash de eventos de la vista) de manera que "esto" en la función de devolución de llamada se refiere a la vista, no a los elementos li. Esto significa que no puedo determinar en cuál de los varios elementos li se ha hecho clic. Si usé un enlace jQuery normal, puedo tener "esto" vinculado a los elementos li, pero luego ya no tengo un seguimiento del modelo, así que no puedo actualizarlo.

Answer 1

No puedo entender por qué no puedo comentar sobre la respuesta de @jashkenas arriba. Su método es correcto (¡gracias!), Pero pensé que aclararía la situación: en su controlador de eventos, puede recuperar el elemento al que estaba vinculado el evento. El código troncal de muestra se vería así:

MyView = Backbone.View.extend({
    events: {
        ''click .item'': ''handleClick''
    },

    handleClick: function(e) {
        this; // The view instance
        e.target; // The element that was clicked 
        e.currentTarget; // The element that was bound by the click event
    }
});

Lo utilizo para configurar el texto predeterminado en todos mis campos de formulario ... sí, todavía no me gusta mucho HTML5 :)

Edit: Btw, e.target es el elemento en bruto. Deberá usar $ (e.target) para obtener acceso a jQuery.

Answer 2

El hábito de jQuery de establecer this en lo que sea conveniente en ese momento es un patrón bastante desagradable, en mi opinión, afortunadamente, nunca tienes que confiar en ello:

onClick: function(e) {
  this;                // Still the view instance (as it should be).
  e.target;            // The element that was clicked.
  e.currentTarget;     // The element that was bound by the click event.
}

... Puede usar el target o el target currentTarget del objeto de evento, según corresponda.