CoffeeScript: enlace de eventos de clic a objetos cargados dinámicamente con JQuery On

ajax

Question

Trabajando en reescribir el front-end de mi sitio en Coffeescript. Entiendo cómo vincular una función de clic a una clase.

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

Sin embargo, estoy teniendo algunos problemas con el contenido cargado dinámicamente. Sé que en JQuery, la solución a esto sería usar la función "On" así:

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

Pero no estoy seguro de cómo se traduce esto 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 si la función es uno de los parámetros? He probado varias sintaxis diferentes y ninguna de ellas parece funcionar, ¡gracias!

Answer 1

JS2Coffee puede ayudar con este tipo de preguntas:

http://js2coffee.org/

Debe ser un poco cuidadoso con js2coffee, ya que a veces se topa con un código JS bastante complicado, pero es sorprendentemente preciso y, por lo general, al menos lo acercará bastante.

Answer 2

Por lo general, 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, utilice paréntesis siempre que el orden de ejecución no sea obvio.

Answer 3

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

Se traduce a este JavaScript:

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

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