jQueryはMeteorのonRenderedでは動作しますが、イベントでは動作しません。なぜですか？

Question

私はあなたがそれをクリックするとアニメートするハンバーガーを持っています。私はそれをonRenderedセクションに配置すれば正常に動作させることができますが、イベントセクションでは動作しません。 Template.eventsでコードを実行しようとすると、ハンバーガーが応答しなくなります。

間違ったつもりどこonRenderedコード

Template.Top_navbar.onRendered(function() { 
var $hamburger = $(".hamburger"); 

    $hamburger.on("click", function(e) { 
     $hamburger.toggleClass("is-active"); 
     event.preventDefault(); 
     var el = $(this); 
     el.prop('disabled', true); 
     setTimeout(function(){el.prop('disabled', false); }, 300); 
    }); 
}); 

イベントコード

Template.Top_navbar.events({ 
    'click .hamburger': function (event) { 
     $(".hamburger").toggleClass("is-active"); 
     event.preventDefault(); 
     var el = $(this); 
     el.prop('disabled', true); 
     setTimeout(function(){el.prop('disabled', false); }, 300); 
    }, 
}); 

Answer 1

thisがthisは、テンプレートインスタンスを指し、そして、...流星onRenderedコールバックで

ですイベントではthisはイベントをトリガした要素のデータコンテキストを参照します。だからthisはどこで使用されているかによって異なります。

しかし、さらに複雑になるのは、onRenderedコールバック内のthisがjqueryイベントハンドラの内側にあるため、そのコンテキストではテンプレートインスタンスではなくDOM要素を参照するため、実際に動作します。 （これは一般的なjavascriptの、流星固有ではありませんhereを参照してください。）

明確にするため

（および健全性）私は、より明示的なことを試すことができますどこでthisを避ける - あなたはちょうどまた、あなたを$(".hamburger")