流星滾動事件

Question

我在流星文檔中找不到流星的滾動事件。在流星應用程序中有人滾動窗口時，我該如何去做某些事情？我試過'scroll window' : function(event) { ... }，它不能按預期工作。

Answer 1

我一直在搞這個。

我還沒有找到一種方法在Template.template.events內乾淨地做到這一點。

現在明顯的臨時解決方案將使用一個簡單的jQuery滾動事件。

$(window).scroll(function(){//your code});應該這樣做。

事情我是想作爲選擇，但無濟於事使用爲：

'scroll *'

'scroll body'

'scroll document'

自然

'scroll window'

我嘗試了通用模板事件中的所有這些選擇器以及UI.body的事件，因爲這是包含頁面主體的新的模板。

重申：您可能最好暫時使用jQuery。

Answer 2

這有點晚，但我想出了一個解決方案;至少在我目前的項目中。

我正在用Meteor實現D3，並且我想要一個自定義縮放功能，以便在用戶滾動時更改模板的尺寸。

產生反應變量 '變焦'

Template.graph.onCreated(function() { 
    var self = this; 
    self.zoom = new ReactiveVar(0); 
    $(window).on('scroll', function(e) { 
     // ... event processing stuff; 
     // say it produces value 'zoomAmount' ... 
     self.zoom.set(zoomAmount); 
    } 
}); 

創建一個返回變焦幫手。 將它引用到隱藏元素中的模板DOM中以使其處於被動狀態。

Template.graph.helpers({ 
    zoom: function() { 
     // This will be called when 'zoom' changes, 
     // so treat this as your events function 
     return Template.instance().zoom.get(); 
    } 
}); 

Answer 3

作爲部分解決方案，您可以在您關心的任何元素上監聽mousewheel事件。很多時候，這正是你想要的。

例如，以下事件偵聽器將阻止用戶使用滾輪進行滾動，但他們仍然可以使用頁面側面的導航欄。 （如果你還沒有overflowy: hidden;禁用它）

Template.body.events({ 
    'mousewheel': function(event, template) { 
     console.log("scrolled"); 
     return false; 
    } 
}); 

Answer 4

在流星沒有用於滾動事件並且沒有本地模板支撐，所以你有你的Template.name.onRendered回調中做。但是，如果您不從Template.name.onDestroyed中刪除內存，將會發生內存泄漏。這最好使用命名空間事件來完成，因爲像$(window).off('scroll');這樣的東西會從窗口中分離所有滾動事件。

import { $ } from 'jquery'; 

Template.myTemplateName.onRendered(function(){ 
    // You can do this multiple times 
    $(window).on('scroll.whateverNamespace', function() { ... }); 
    $(window).on('scroll.whateverNamespace', function() { ... }); 
}) 

Template.myTemplateName.onDestroyed(function(){ 
    $(window).off('scroll.whateverNamespace'); 
})