What is the correct way to do DOM manipulation in Meteor?

Question

I am using a package called Timeline

https://github.com/VeriteCo/TimelineJS

It works with a placeholder like

<div id="my-timeline"></div> 

And then, ultimately, call the jQuery call to control the div. Visually, I see that the graph appears on the screen and then disappears almost immediately. A similar effect occurs with the following simple example:

 <div id="my-temp"></div> 

in conjunction with

 $(document).ready(function() { $('#my-temp').html('HELLO'); }); 

What is the correct way to perform this type of manipulation without losing the HTML file?

Answer 1

I believe that you should use constant regions so that the Meteor does not repurpose your div.

 {{#constant}} <div id="my-temp"></div> {{/constant}} 

Answer 2

Use the Handlebars pattern, do not use jQuery dom manipulations. If you need to use javascript dom manipulations, be sure to use Meteor.render() .

http://docs.meteor.com/#meteor_render

You also need to call the timeline creation code inside Template.myTemplate.rendered

http://docs.meteor.com/#template_rendered

Answer 3

Meteor Render is the right way, as Harry mentioned. Here is a link to the new documentation http://blazejs.org/api/templates.html#Template-onRendered