Meteor: aggiornamento automatico della tela con i dati sottoscritti?

Question

potrei mancare qualcosa, ma sembra che la "magia" di Meteor ruota dati intorno vincolanti alle elementi DOM e testo aggiornamento e frammenti HTML tramite manubrio: http://docs.meteor.com/#reactivity

Questo è grande, tuttavia, quando si cerca di scrivere un'applicazione di meteoriti che visualizza i dati in tempo reale in un <canvas> elemento, non riesco a capire il "modo di meteore" per aggiornare la mia tela in cui le modifiche dei dati in tempo reale, dal momento che la tela è popolata tramite il codice JS come:

var g = canvas.getContext('2d') 
g.fillRect(x, y, w, h) 

e non il testo di backup dei dati nel modello HTML.

Sto provando a disegnare sulla tela utilizzando i dati di un Meteor.Collection.

Il mio unico pensiero è stato quello di incorporare tela-disegno di codice JS nel template HTML in un tag script popolato da manubrio Vars, ma questo sembra sbagliato dal momento che gli eventi di meteore e il codice di associazione dati è già JS lato client.

C'è un modo per ascoltare le modifiche dei dati in tempo reale, che attivano il disegno sulla tela tramite JS anziché elementi/testo HTML?

Per favore fatemi sapere se posso chiarire la questione in qualche modo

Update: risposta Tom seguito mi ha fatto notare Meteor.deps, che sembrano per consentire l'esecuzione di codice arbitrario in un contesto reattivo: http://docs.meteor.com/#on_invalidate

Proverò questo e aggiorno qui se funziona.

Answer 1

Questo funziona:

var Shapes = new Meteor.Collection('shapes') 

if (Meteor.is_client) { 
    // Function that redraws the entire canvas from shapes in Meteor.Collection 
    function drawShapes() { 
    var shapes = Shapes.find({}) 
    shapes.forEach(function(shape) { 
     // draw each on canvas 
    }) 
    } 

    var startUpdateListener = function() { 
    // Function called each time 'Shapes' is updated. 
    var redrawCanvas = function() { 
     var context = new Meteor.deps.Context() 
     context.on_invalidate(redrawCanvas) // Ensures this is recalled for each update 
     context.run(function() { 
     drawShapes() 
     }) 
    } 
    redrawCanvas() 
    } 

    Meteor.startup(function() { 
    startUpdateListener() 
    }) 
} 

Answer 2

Forse la risposta alla tua domanda è utilizzare Collection.observe (http://docs.meteor.com/#observe) e attivare il codice di ridisegno pertinente nei vari callback.

Per esempio, qualcosa come:

Rectangles.observe({ 
    added: function(rect) { 
    var g = canvas.getContext('2d'); 
    g.fillRect(rect.x, rect.y, rect.w, rect.h); 
    }, 
    // etc 
}) 

Answer 3

ho avuto qualche problema con l'aggiornamento la tela così ho creato questo gioco semplice demo: https://github.com/randompast/Meteor-SimpleGame