流星：ページを更新せずにJavascriptでDOMを更新するにはどうすればいいですか？

Question

更新：

this scriptは私が探している触媒かもしれません。もしそうなら、それをテストし、この質問に答えてください。

---

私はRaphaelJSを使用しています...

私は最終的にこれに対する答えを見つけることができます確信しているが、私は他の誰かが右のオフそれを知っている場合には、今そこにそれを入れていますDOMを操作する（特定のDIVにSVGタグを追加）、MongoDBコレクションの更新があれば、それらの特定のDOM部分を再レンダリングしたい。

例として： - 私にはPiePiecesというコレクションがあります。 - ページが最初にレンダリング/呼び出されるとき、コレクション内のピースの数が4であると思わせます。 -Iプログラムでピースを追加します。PiePieces.insert({...}) - 標準と同じようにページを更新します。ハンドルバーのバインド状況が問題ですが、新しいエントリは直接のDOM操作を実行するRaphaelスクリプトを経由する必要があります。リフレッシュせずに更新> DOM修正/ページ - DOMを操作するために>クライアント関数呼び出し -

MongoDBのコレクション更新イベント：

ので、ロジックはこのような何かを行くだろう。

DOM自体から値を読み取って実装しようとしましたが、更新されたDOMを取得できますが、ページ全体がリフレッシュされたり、手動でページを更新したり、DOMツリーが完成しませんまだ、それは私がリフレッシュするまで空白です。

小さなコードスニペットを使用して正しい方向に向けることができますか？ （類似のものが既に存在する場合は、どこに私が掘りに行くか教えてください）

ありがとうございます！

Answer 1

は、あなたがそうのようなテンプレートの中からdrawメソッドを参照することができ（私は...これまで流星を愛しています）：

template.html

<template name="drawing"> 
    {{#each PiePieces}} 
    {{draw piece}} <!-- assuming 'piece' is a property on 'PiePiece' --> 
    {{/each}} 
</template> 

client.js

Template.drawing.PiePieces = function(){ 
    PiePieces.find(); 
} 

Template.drawing.draw = function(piece){ 
    // your drawing method here 
} 

Answer 2

おそらくobserveメソッドが必要です。あなたは "MongoDB collection update event"と呼ばれたものにコールバックを割り当て、その後Raphaëlなどを使用するDOM操作関数を呼び出すことができます。

それは次のようになります。

PiePieces.find().observe({ 
    changed: function(piePiece) { 
     //call DOM manipulating function 
    } 
}) 

これは、すべてのPiePiecesにコールバックを添付します。コールバックをすべてのドキュメントに添付したくない場合は、オブザーバの前に検索対象のものを照会します。