Fonctions multiples comme arguments dans CoffeeScript

Question

Je ne peux pas pour la vie de moi comprendre cela ou trouver une solution en ligne. J'essaie de comprendre comment écrire un script en CoffeeScript à partir de JavaScript basé sur jQuery.

Le script est le suivant:

 jQuery('.post-thumb a').hover( function() {
    jQuery(this).find('.overlay').fadeIn(150);
}, function() {
    jQuery(this).find('.overlay').fadeOut(150);
});
 

J'ai d'abord essayé de réécrire ça comme ceci:

 thumb_overlay =>
    $('.post-thumb a').hover
        => $(this).find('.overlay').fadeIn(150)
        ,=> $(this).find('.overlay').fadeOut(150)
 

Mais cela n'a pas fonctionné, alors j'ai pensé que je posterais ici. Alors, comment puis-je écrire ce JavaScript dans CoffeeScript?

Answer 1

Je pense que vous y êtes presque, mais vous avez besoin de quelques parenthèses (de groupe) et quelques barres obliques inverses de garder CoffeeScript de mal interpréter les retours à la ligne. Essayez ceci:

thumb_overlay =>
    $('.post-thumb a').hover \
        (=> $(this).find('.overlay').fadeIn(150)), \
        (=> $(this).find('.overlay').fadeOut(150))

Vous pourriez également écraser tous en une seule ligne, mais vous pourriez le regretter dans quelques mois:

thumb_overlay =>
    $('.post-thumb a').hover (=> $(this).find('.overlay').fadeIn(150)), (=> $(this).find('.overlay').fadeOut(150))

Et BTW, allez à la page GitHub et cliquez sur "ESSAYEZ COFFEESCRIPT", c'est un moyen facile de trier les petits morceaux de CoffeeScript out; commencer par l' -> version de réduire le bruit dans le code JavaScript, et puis de passer à l' => lorsque vous obtenez le droit de JavaScript.

Je ne suis pas sûr si vous souhaitez => formulaires dans ce cas, l' -> formulaire:

$('.post-thumb a').hover \
    (-> $(this).find('.overlay').fadeIn(150)), \
    (-> $(this).find('.overlay').fadeOut(150))

serait vous donner le JavaScript que vous avez commencé avec:

$('.post-thumb a').hover((function() {
  return $(this).find('.overlay').fadeIn(150);
}), (function() {
  return $(this).find('.overlay').fadeOut(150);
}));

Et si vous n'aimez pas les barres obliques inverses, vous pourriez faire ceci:

$('.post-thumb a').hover( 
    -> $(this).find('.overlay').fadeIn(150)
    -> $(this).find('.overlay').fadeOut(150)
)

Answer 2

Pour ceux qui recherchent une réponse dans CoffeeScript 2014,

 $('someSelector').hover ->
  alert "hello"
, ->
  alert "world"
 

compile en

 $('someSelector').hover(function() {
  return alert("hello");
}, function() {
  return alert("world");
});