Meteor: how to update DOM via Javascript without a page refresh?
- by strack
UPDATE:
It looks like this script may be the catalyst I'm looking for. Will test it and answer/close this question if so.
I'm sure I'll find the answer to this eventually, but I'm putting it out there now, in case someone else knows it right off...
I am using RaphaelJS to manipulate the DOM (adds a bunch of SVG tags to an identified DIV), and I want to re-render those specific DOM parts, if there's an update to the MongoDB collection.
As an example:
-Let's say that I have a collection called PiePieces.
-When the page is first rendered/ called, let's pretend that the number of pieces in the collection is 4.
-I programmatically add a pie piece using console: PiePieces.insert({...})
-I want the page to update like it would for a standard handlebars binding situation, but the problem is, the new entry needs to go through the Raphael script, which performs direct DOM manipulation.
So, the logic would go something like this:
MongoDB collection update event - Client function call to manipulate DOM - DOM modified/ page updated without a refresh.
I've tried implementing this by reading values from the DOM itself, and I can get the updated DOM, but the entire page refreshes and/or I have to manually refresh the page, OR the DOM tree isn't completed yet, and so it's blank until I refresh.
Can you point me in the right direction, maybe with a small code snippet/example?
(if something similar already exists, just tell me where and I'll go digging)
Thanks in advance! (I am LOVING Meteor so far...)
