Is there something strange about the way Meteor loads jQuery?

Question

I'm having some difficulties with standard jQuery functionality when I use Meteor. My main 'client/server' JS file looks like this:

if (Meteor.is_client) {
$(document).ready(function(){
$('#myDiv').append("foo");
console.log('bar');
});
}

When I load the app, 'bar' logs fine, but .append doesn't work. If I call the same .append in the console after page load, it works fine. (Similarly if I run the same code in a non-Meteor setting, it also works fine.)

The code I actually want to run looks like this:

$(document).ready(function(){
var myModel = new MyModel({"name": "foo"});
var myModelView = new MyModelView({model: myModel});
});
var MyModel = Backbone.Model.extend({
initialize: function() {  
}
});
var MyModelView = Backbone.View.extend({
el: $('#myEl'),
initialize: function(){
_.bindAll(this, 'render');
this.render();
},
render: function(){
$(this.el).append(this.model.get('name'));
console.log(this.model.get('name'))
}
});

The method that isn't working here is render, in the View. The console.log bit of the render method is fine, but the jQuery append doesn't work. Initially I wondered whether it was something about the way I was using Backbone that was the problem, but now I'm wondering if it's a Meteor/jQuery issue instead?

Answer 1

Perhaps try using Meteor.startup on the client-side:

if (Meteor.is_client) {
    Meteor.startup(function () {
        $(document).ready(function (){
            $('#myDiv').append("foo");
            console.log('bar');
        });
    });
}

From what I gather in the Meteor docs, the $(document).ready() call may even be superfluous when using Meteor.startup

Answer 2

The following worked for me:

if (Meteor.is_client) {
    Template.templateNameThatContainsMyDiv.rendered = function(){
        $('#myDiv').append("foo");
        console.log('bar');
    };
}

Answer 3

$(document).ready kicks of when the initial static DOM has finished loading, if you are using any JS templating libraries then the initial static DOM is most likely empty at the time when $(document).ready is ran. So, you will have to subscribe with a callback to kick off your code when the template has done rendering. If that's not possible you'll have to use .on or .bind and listen for the insertion of the DOM node you are looking for...