Callback after the DOM was updated in Meteor.js

Question

I have this Meteor project: https://github.com/jfahrenkrug/code_buddy

It's basically a tool with a big textarea and a pre area that lets you enter source code snippets that automatically get pushed to all connected clients.

I'd like to automatically run the highlightSyntax function when the code was changed, but it doesn't really work.

I've tried query.observe, but that didn't work too well: The syntax highlight flashed up once and then disappeared again.

So my question is: How do I run code after the DOM was updated?

Answer 1

As for the current version of Meteor (1.0), we can now use the .afterFlush() function of Tracker.

Tracker.autorun(function(e){
   var data = Router.current().data();
   if(data.key !== undefined){
       //the data is there but dom may not be created yet
     Tracker.afterFlush(function(){
       //dom is now created.
    });
   }
});

Answer 2

I just found a little hack that seems to be working pretty well:

Template.myTemplate.onRendered(function() {
    this.autorun(function() {
        Meteor.setTimeout(function() {
            // DOM has been updated
        }, 1);
    });
});

I'm not a Meteor expert so it might have some downsides, but I haven't found any for now — except that it's a bit dirty !

Answer 3

I think you might want to pass a callback to

Meteor.startup(callback)

see http://docs.meteor.com/#meteor_startup