Evento di scorrimento per Meteor

Question

Non sono riuscito a trovare un evento di scorrimento per la meteora nei documenti meteo. Come faccio a fare qualcosa mentre qualcuno fa scorrere la finestra verso il basso in un'applicazione meteorica?

Ho provato 'scroll window' : function(event) { ... } che non funziona come previsto.

Answer 1

Ho fatto anche questo.

Non ho trovato un modo per farlo in modo pulito entro Template.template.events.

L'ovvia soluzione temporanea in questo momento sarebbe utilizzare un semplice evento di scorrimento jQuery.

$(window).scroll(function(){//your code}); dovrebbe fare il trucco.

cose che stavo cercando di utilizzare come selettore, ma senza alcun risultato sono stati:

'scroll *'

'scroll body'

'scroll document'

e naturalmente

'scroll window'

Ho provato tutti questi selettori all'interno degli eventi di un modello generico, insieme agli eventi UI.body, in quanto si tratta del nuovo modello di fiammata che comprende il corpo della pagina.

Per ripetere: Probabilmente stai meglio usando jQuery per il momento.

Answer 2

Questo è un po 'in ritardo ma ho trovato una soluzione; almeno nel contesto del mio attuale progetto.

Sto implementando D3 con Meteor e volevo una funzionalità di zoom personalizzata che modificasse le dimensioni del modello quando l'utente scorre.

Creare un reattivo variabile 'zoom'

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); 
    } 
}); 

Creare un aiutante che restituisce zoom. Riferiscilo nel template DOM in un elemento nascosto per renderlo reattivo.

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

Come soluzione parziale, è possibile intercettare l'evento mousewheel su qualunque elemento che ti interessano. Molte volte questo è esattamente quello che vuoi comunque.

Ad esempio, il seguente listener di eventi impedirà all'utente di scorrere con la rotella di scorrimento, ma sarà comunque in grado di utilizzare la barra di navigazione sul lato della pagina. (Se non avete disattivato con overflowy: hidden;)

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

Answer 4

In Meteor v'è alcun supporto nativo per modello di eventi di scorrimento, in modo da avere a che fare all'interno del vostro Template.name.onRendered callback. Tuttavia, si verificherà una perdita di memoria se non la si rimuove da Template.name.onDestroyed. Questo si può fare meglio con gli eventi namespace, poiché qualcosa come $(window).off('scroll'); scollegherà tutti gli eventi di scorrimento dalla finestra.

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'); 
})