jquery - this.eachは実行されていません

Question

jQueryの小さなプラグインを作成してCoffeeScriptを覚えようとしていますが、divタグを移動して画面に保持します。なんらかの理由で、私は「this.each」を正しく返すことができません。私はjQuery Plugin Authoringページから基本構造だけを試しましたが、それでも動作しません。これを働かせるために何か特別なことがありますか？

Ruby 1.9.3とRails 3.2.2で、このスクリプトをcoffee-rails（3.2.1）とjquery-rails（2.0.1）のgemで実行しています。

CoffeeScriptの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

を生成

$ = 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 

あなたはここで、様々な問題を抱えています。

我々はいくつかの行番号を追加することから始めます：ライン4で

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 

、thisはそれだけで、昔ながらのDOMオブジェクトである、offset方法をサポートしているjQueryオブジェクトではありません。 $(this)を使用する必要があります（または、CoffeeScriptの土地にあるので、$(@)）。

あなたは8行目で別のコンテキストの問題を抱えている：thisはあなたがライン4でアップいたのと同じthisではありません、スクロールイベントがwindowでトリガされているため、このthisはwindowです。

$(window).scroll() => 

ます。また@を使用する代わりに、必要があります：あなたが望む状況に$(window).scrollコールバックをバインドする

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

またはfat arrowを使用して：あなたは、適切なオブジェクトへの参照をキャッシュすることにより、この問題を解決することができますCoffeeScriptのthis

、我々はこれを持って、これらの問題解決：

$.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/

あなたがそのあなたわかりますまだいくつかのバグがありますが、あなたはそれらを今修正することができるはずです実際に走っているものがあります。開発とデバッグ（Java | Coffee）スクリプトの実行中に、JavaScriptコンソールを開いたままにしておくことをお勧めします。

JavaScriptのthisまたはCoffeeScriptの@を参照するたびに、コードが正しいコンテキストで実行されていることを確認し、コールバック機能があるかどうかを3回チェックします。