Meteor - automatyczne aktualizowanie kanwy z subskrybowanymi danymi?

Question

I może być czegoś brakuje, ale wydaje się, że Meteor jest „magia” kręci się wokół wiązania danych do elementów DOM i aktualizacja tekstu i fragmenty HTML za pośrednictwem kierownicy: http://docs.meteor.com/#reactivity

To jest wielki, jednak, kiedy próbuje pisać aplikacja meteor, który wyświetla dane żyć w < płótnie > elementu, nie mogę dowiedzieć się „meteor drogę”, aby zaktualizować moje płótno gdy żywe zmiany danych, ponieważ płótno jest wypełniana za pomocą kodu JS jak:

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

a nie tekst oparty na danych w szablonie HTML.

Próbuję narysować na płótnie przy użyciu danych z Meteor.Collection.

Moja jedyna myśl polegała na umieszczeniu kodu JS na rysunku w szablonie HTML w znaczniku skryptu zapełnionym przez wariacje kierownicy, ale wydaje się to błędne, ponieważ zdarzenia meteorytów i kod wiążący dane to już JS po stronie klienta.

Czy jest jakiś sposób nasłuchiwania zmian danych na żywo, które powodują rysowanie na płótnie przez JS zamiast elementów HTML/tekstu?

Proszę dać mi znać, jeśli mogę wyjaśnić kwestię w jakiś sposób

Aktualizacja: poniżej Toma odpowiedź mnie zauważy Meteor.deps, które wyglądają, aby umożliwić wykonanie dowolnego kodu w kontekście reaktywnego: http://docs.meteor.com/#on_invalidate

Wypróbuję to i zaktualizuję tutaj, jeśli zadziała.

Answer 1

To działa:

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

Być może odpowiedzią na twoje pytanie jest użycie Collection.observe (http://docs.meteor.com/#observe) i wywołanie odpowiedniego kodu przerysowania w różnych wywołaniach zwrotnych.

Na przykład coś takiego:

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

Answer 3

miałem pewne problemy z aktualizacją płótno więc stworzyłem tej prostej grze Demo: https://github.com/randompast/Meteor-SimpleGame