I'm trying to add a class to a DOM element that is the parent of all my DOM tree. I tried different approaches:

//this one doesn't work at all. DOM is not loaded
Template.home.created = function() {
    Meteor.startup(function() {
        $("#wrapper").addClass('app');
   });
}

//this one only works if you do a page load, not if you render the template through a link (using router)
Template.home.created = function() {
    Meteor.startup(function() {
        $(document).ready(function() {
            $("#wrapper").addClass('app');
        });
   });
}

//also does not work if I click on a link
Template.home.created = function() {
    $(document).ready(function() {
        $("#wrapper").addClass('app');
   });
}

//does not work at all (I really expected this one to work by clicking on a link (using router))
Template.home.created = function() {
    $("#wrapper").addClass('app');
   });
}

What I'm trying to do couldn't be more simple: add a class so I can style my wrapper accordingly to each template. Any advise on how to do this would be greatly appreciated.

I'm trying to add a class to a DOM element that is the parent of all my DOM tree. I tried different approaches:

//this one doesn't work at all. DOM is not loaded
Template.home.created = function() {
    Meteor.startup(function() {
        $("#wrapper").addClass('app');
   });
}

//this one only works if you do a page load, not if you render the template through a link (using router)
Template.home.created = function() {
    Meteor.startup(function() {
        $(document).ready(function() {
            $("#wrapper").addClass('app');
        });
   });
}

//also does not work if I click on a link
Template.home.created = function() {
    $(document).ready(function() {
        $("#wrapper").addClass('app');
   });
}

//does not work at all (I really expected this one to work by clicking on a link (using router))
Template.home.created = function() {
    $("#wrapper").addClass('app');
   });
}

What I'm trying to do couldn't be more simple: add a class so I can style my wrapper accordingly to each template. Any advise on how to do this would be greatly appreciated.

• javascript
• jquery
• templates
• dom
• meteor

2 Answers 2

The template created method is called when an instance of the template is initialized but does not wait for the DOM to be ready for manipulation.

Use the template rendered method which will get called when the DOM has been rendered by the template (once for first load, and every time the markup changes within the template)

Something like this should work (haven't tested):

Template.home.rendered = function(){
    var element = $("#wrapper");
    if(!element.hasClass("app")){
        element.addClass("app"); 
    }
}

Try using Template.home.rendered instead of Template.home.created. Don't use Meteor.startup or $(document).ready within it.

http://docs.meteor./#template_rendered

Template.home.created is called when the template object is created, but nothing has been rendered into dom nodes at that point.