メテオ - 定期購読データでキャンバスを自動的に更新していますか？

Question

私は何かが足りないかもしれないが、流星の「魔法」がDOM要素に周りの結合データを公転しているようですし、ハンドルを経由して、テキストとHTMLの断片を更新：http://docs.meteor.com/#reactivity

書き込もうとしたときにこれは、しかし素晴らしいです

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

：キャンバスのようなJSコードを経由して移入されますので、<キャンバス>要素でライブデータを表示する流星アプリは、私は、とき、ライブデータの変更私のキャンバスを更新するために、「流星の道」を把握することはできませんHTMLテンプレート内のデータバックアップテキストではありません。

私は、Meteor.Collectionのデータを使用してキャンバスに描画しようとしています。

私の唯一の考えは、handlebar varsによって設定されたスクリプトタグのHTMLテンプレートにキャンバス描画のJSコードを埋め込むことでしたが、流星のイベントとデータバインディングコードはすでにクライアントサイドのJSなので、これは間違っています。

ライブデータの変更をリッスンする方法はありますか？HTML要素/テキストの代わりにJSを使用してキャンバスに描画されますか？ トムの答えは以下の私は、反応性コンテキストで任意のコードの実行を許可するように見えるMeteor.depsを、気づく作っ： http://docs.meteor.com/#on_invalidate

私はいくつかの方法

アップデートで質問を明確にすることができます場合は私に知らせてください

これを試して、動作したらここで更新します。

Answer 1

これは動作します：

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

おそらく、あなたの質問に対する答えは、Collection.observe（http://docs.meteor.com/#observe）を使用し、さまざまなコールバックで関連する再描画コードをトリガーすることです。例えば

、のようなもの：

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

Answer 3

私はこの単純なゲームのデモを作成したので、キャンバスを更新するといくつかの問題だった：私は https://github.com/randompast/Meteor-SimpleGame