$（窗口）.scroll（...）正在运行，即使模板在流星摧毁($(window).scroll(…

我有两个单独的模板，并在这两个模板（渲染）我做$（窗口）.scroll（），但是却去一个模板另一个时，$（窗口）.scroll（）从两个运行，先前以及当前模板。

代码片段如下：

dashboard1.js

Template.dashboard1.rendered = function(){
    $(window).scroll(function() {
        console.log('dashboard1 scroll');
        //... doing pagination and sticky element for dashboard1
    });
}

Template.dashboard1.destroyed = function(){
    console.log('dashboard1 destroyed');
}

dashboard2.js

Template.dashboard2.rendered = function(){
    $(window).scroll(function() {
        console.log('dashboard2 scroll');
        //... doing pagination and sticky element for dashboard2
    });
}

Template.dashboard2.destroyed = function(){
    console.log('dashboard2 destroyed');
}

安慰：

dashboard1 destroyed
dashboard2 scroll
dashboard1 scroll
dashboard2 scroll
dashboard1 scroll
dashboard2 scroll

但是，如果我刷新浏览器，那么它仅从当前模板到来。

为什么发生这种情况的任何想法？ 什么是解决这个问题的方式。

Answer 1:

销毁流星模板将进行内部清理有关模板渲染引擎（ Blaze ），它会通过注销事件模板地图声明的事件，但它不会注销全局窗口事件流星是不知道的。

在注册自定义全局事件后onRendered使用生命周期事件回调$.on ，你需要注销其在onDestroyed使用回调$.off 。

您可以使用此模式来注册和注销处理程序：

Template.dashboard1.onRendered(function(){
  this.scrollHandler = function(){
    // you can use the this keyword here to reference the template instance
    console.log("dashboard1 scroll");
    //... doing pagination and sticky element for dashboard1
  }.bind(this);
  $(window).on("scroll" ,this.scrollHandler);
});

Template.dashboard1.onDestroyed(function(){
  $(window).off("scroll", this.scrollHandler);
  console.log("dashboard1 destroyed");
});

通过附加这个绑定功能为模板实例的属性，你可以在事件处理中执行模板实例特定的逻辑。

Answer 2:

你需要使用不同的模板被破坏手动删除你的听众。

var scrollHandler = function() {
  console.log('dashboard1 scroll');
}

Template.dashboard1.rendered = function() {
  $(window).scroll(scrollHandler);
}

Template.dashboard1.destroyed = function() {
  $(window).off("scroll", scrollHandler);
  console.log('dashboard1 destroyed');
}

文章来源: $(window).scroll(…) is running even if the template is destroyed in meteor