Множественные функции в качестве аргументов в CoffeeScript

Я не могу для жизни понять это или найти решение в Интернете. Я пытаюсь понять, как написать script в CoffeeScript с jQuery на основе JavaScript.

script:

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

Сначала я попробовал переписать так:

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

Но это не сработало, поэтому я подумал, что отправлю сюда. Итак, как мне написать этот JavaScript в CoffeeScript?

Ответ 1

Я думаю, что вы почти там, но вам нужны скобки (чтобы сгруппировать вещи) и некоторые обратные косые черты, чтобы CoffeeScript не ошибочно интерпретировал символы новой строки. Попробуйте следующее:

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

Вы также можете вытереть все это в одну строку, но вы можете пожалеть об этом через несколько месяцев:

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

И BTW, перейдите на страницу GitHub и нажмите "TRY COFFEESCRIPT", что позволяет легко сортировать небольшие фрагменты CoffeeScript; начните с версии ->, чтобы сократить шум в JavaScript, а затем переключитесь на =>, когда вы получите правильный JavaScript.

Я не уверен, хотите ли вы в формах => в форме формы ->:

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

предоставит вам JavaScript, с которого вы начали:

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

И если вы не любите обратную косую черту, вы можете сделать это:

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

Ответ 2

Для тех, кто ищет ответ в 2014 году CoffeeScript,

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

компилируется в

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