2012-01-15 13 views
20

Trabajando en la reescritura del front-end de mi sitio en Coffeescript. Entiendo cómo vincular una función de clic a una clase.CoffeeScript - Enlace Haga clic en Eventos para objetos cargados dinámicamente con JQuery en

$('.song').click -> 
    //code 

Sin embargo, tengo algunos problemas con el contenido cargado dinámicamente. Sé que en jQuery, la solución a esto sería utilizar la función "On" de esta manera:

$(document).on('click', '.song', function(){ 
    //code 
}); 

Pero estoy seguro de cómo esto se traduce en CoffeeScript. Tengo la impresión de que la flecha del cohete -> se traduce en una función anónima en JavaScript, pero ¿cómo funciona eso si la función es uno de los parámetros? He probado varias sintaxis diferentes y ninguna de ellas parece funcionar, ¡gracias!

Respuesta

15
$(document).on('click', '.song', (-> 
    ### code ### 
)); 

se traduce en este JavaScript:

$(document).on('click', '.song', (function() { 
    /* code */ 
})); 

Tenga en cuenta que es posible que desee utilizar el operador => en lugar de ->; el uso de la flecha doble también vincula this al controlador de eventos (equivalente al uso de jQuery's bind).

+0

@Epeli, aunque su edición también es una posibilidad, no es mi preferencia. Dependiendo del contenido de la función, CS tiene problemas para encontrar el final, que se resuelve colocando las llaves de forma explícita. Encuentro las ambigüedades en CS molestas; '$ (document) .on' por ejemplo devuelve' on' sin invocarlo, 'do $ (document) .on' lo invoca,' $ (document) .on something' también lo invoca, y 'do $ (document) .on algo' invocará el resultado. El uso de llaves explícitas para los argumentos hace que esto sea menos propenso a los errores en mi humilde opinión. Por lo tanto, voy a editar de nuevo. Siéntase libre de publicar su propio mensaje. Lo rescindiré. ;) – Lucero

+0

Roger y lo siento. Parecía una edición bastante obvia ya que rara vez se ve código CS con corchetes si el orden de ejecución del código es claro. Como en este ejemplo trivial. – Epeli

+0

@Epeli, es suficiente, y por eso me expliqué. Teniendo miles de líneas de código CS ejecutándose en un SPA modular y viendo a mis desarrolladores lidiar con algunos de los comportamientos explicados, he decidido requerir a los padres para las invocaciones de métodos en mi organización, al mismo tiempo que prohíbo el uso de 'do '. De hecho, esto ayuda a mantener alta la calidad del código, especialmente durante el mantenimiento del código. – Lucero

4

JS2Coffee puede ayudar con este tipo de preguntas:

http://js2coffee.org/

Tienes que ser un poco cuidadoso con js2coffee, ya que a veces tropieza con código JS bastante complicado, pero es sorprendentemente precisa, y lo hará por lo general al menos te acerco bastante.

21

Normalmente uno no usa corchetes en CoffeeScript si el orden de ejecución es claro sin ellos. Así que esto se puede escribir así:

$(document).on 'click', '.song', -> 
    ### code ### 

pero por supuesto siempre utilice paréntesis cuando la orden de ejecución no es obvia.

+0

¡Esta debería ser ** la ** respuesta! – mlt

Cuestiones relacionadas