jquery - this.each не исполняется

Question

Я пытаюсь изучить CoffeeScript, создав небольшой плагин для jQuery, который будет перемещать тег div, чтобы держать его на экране. По какой-то причине я не могу получить «return this.each» для правильной работы. Я пробовал только основную структуру с страницы создания сценария jQuery, но это все равно не сработает. Есть ли что-то особенное, что я должен сделать, чтобы заставить это работать?

Я запускаю этот скрипт на Ruby 1.9.3 и Rails 3.2.2 с помощью рельсов (3.2.1) и jquery-rails (2.0.1).

CoffeeScript

$ = jQuery 

defaults = 
    paddingTop: 10 


$.fn.fixedTop = (options) -> 
    settings = $.extend defaults, options 
    this.each() -> 
     beginPoint = this.offset().top - settings.paddingTop 
     $(window).scroll() -> 
     scrollTop = $(window).scrollTop() 
     if beginPoint < scrollTop 
      $(this).css 'marginTop', (scrollTop-beginPoint)+settings.paddingTop 

Сформирован JS

(function() { 
    var $, defaults; 
    $ = jQuery; 
    defaults = { 
    paddingTop: 10 
    }; 
    $.fn.fixedTop = function(options) { 
    var settings; 
    settings = $.extend(defaults, options); 
    return this.each(function() { 
     var beginPoint; 
     beginPoint = this.offset().top - settings.paddingTop; 
     return $(window).scroll(function() { 
     var scrollTop; 
     scrollTop = $(window).scrollTop(); 
     if (beginPoint < scrollTop) { 
      return $(this).css('marginTop', (scrollTop - beginPoint) + settings.paddingTop); 
     } 
     }); 
    }); 
    }; 
}).call(this); 

Answer 1

У вас есть различные проблемы здесь.

Мы начнем с добавления некоторых номеров строк:

1 $.fn.fixedTop = (options) -> 
2 settings = $.extend defaults, options 
3 this.each() -> 
4  beginPoint = this.offset().top - settings.paddingTop 
5  $(window).scroll() -> 
6  scrollTop = $(window).scrollTop() 
7  if beginPoint < scrollTop 
8   $(this).css 'marginTop', (scrollTop-beginPoint)+settings.paddingTop 

В строке 4, this не является объектом JQuery, который поддерживает метод offset, это просто обычный старый объект DOM; вам нужно использовать $(this) (или, так как мы находимся на земле CoffeeScript, $(@)).

У вас есть еще одна проблема контекста в строке 8: this не то же самое this вы имели вверх на линии 4, это this является window, так как событие прокрутки, которые инициированы на window. Вы можете решить эту проблему за счет кэширования ссылки на соответствующий объект:

$el = $(@) 
#... 
$(window).scroll() -> 
    # Use $el rather than $(@) in here 

или с помощью fat arrow для связывания $(window).scroll обратного вызова к контексту вы хотите:

$(window).scroll() => 

Вы также должны использовать @ вместо this в CoffeeScript.

Когда мы фиксируем те проблемы, которые мы имеем это:

$.fn.fixedTop = (options) -> 
    settings = $.extend defaults, options 
    @each() -> 
    $el = $(@) 
    beginPoint = $el.offset().top - settings.paddingTop 
    $(window).scroll() -> 
     scrollTop = $(window).scrollTop() 
     if beginPoint < scrollTop 
     $el.css 'marginTop', (scrollTop - beginPoint) + settings.paddingTop 

Демо: http://jsfiddle.net/ambiguous/cmBYD/

Или это:

$.fn.fixedTop = (options) -> 
    settings = $.extend defaults, options 
    @each() -> 
    beginPoint = $(@).offset().top - settings.paddingTop 
    $(window).scroll() => 
     scrollTop = $(window).scrollTop() 
     if beginPoint < scrollTop 
     $(@).css 'marginTop', (scrollTop - beginPoint) + settings.paddingTop 

Демо: http://jsfiddle.net/ambiguous/JCbJj/

Вы увидите, что вы все еще есть некоторые ошибки, но вы должны быть в состоянии исправить те, которые сейчас у вас есть что-то, что действительно работает. Вероятно, вы захотите, чтобы ваша консоль JavaScript открывалась при разработке и отладке (Java | Coffee) Script.

Главный урок здесь: (ahem) this: каждый раз, когда вы ссылаетесь на this в JavaScript или @ в CoffeeScript, дважды проверьте, что ваш код работает в правильном контексте и тройная проверка, есть ли функции обратного вызова.