Estoy usando Backbone.js y tengo un elemento de interfaz de usuario de tipo de control segmentado para la vista de cada modelo. Cada uno está formado por una ul con unos pocos elementos li. Quiero vincular un evento de modo 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 vincula los eventos (estos están en el hash de eventos de la vista) de modo 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 utilicé un enlace jQuery normal, puedo tener "esto" vinculado a los elementos li, pero ya no tengo un seguimiento del modelo, por lo que no puedo actualizarlo.
En mi opinión, el hábito de jQuery de configurar this para lo que sea conveniente en ese momento es un patrón bastante desagradable; afortunadamente, nunca tienes que confiar en él:
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 objetivo currentTarget del objeto de evento, según corresponda.
No puedo entender por qué no puedo comentar sobre la respuesta de @jashkena arriba. Su método es correcto (¡gracias!) pero pensé en aclarar 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 uso para configurar el texto predeterminado en todos mis campos de formulario... sí, todavía no me gusta mucho HTML5 :)
Editar: Por cierto, e.target es el elemento sin procesar. Deberá usar $(e.target) para obtener acceso a jQuery.