What's the correct way to perform DOM manipulation in Meteor?

Question

I'm using a package called Timeline

https://github.com/VeriteCo/TimelineJS

It works by having a placeholder such as

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

And then ultimately making a jQuery call to manipulate the div. Visually I'm seeing the timeline appear on the screen and then disappearing almost straight away. A similar effect occurs with the following simple example:

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

combined with

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

What's the correct way to perform this type of manipulation without having the resultant HTML disappear?

Moria

Answer 1

I believe you should use constant regions to prevent Meteor from re-rendering your div.

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

Poorhouse

Answer 2

Use Handlebars template, don't use jQuery's dom manipulation. If you have to use javascript dom manipulation, make sure to use Meteor.render().

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

Also you need to call your timeline creation code inside Template.myTemplate.rendered

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

Kosiur

What if it's a third party library doing the DOM manipulation? Does that render the library incompatible? – Moria

Answer 3

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

Dehydrate