Emberjs Will Not Load Jquery/javascript, Run Code When Html Is Inserted In The Page

Help! I'm working on a meaty emberjs/yeoman project that uses multiple hbs templates that can all be routed to from one application.hbs's sidebar. The problem is when I load the pa

Solution 1:

You're probably trying to attach the jquery before the elements have been created. Document ready isn't necessarily the same time Ember's views are ready.

In your case you insert the sidebar in the application template, so in your application view you could add the jquery in the didInsertElement hook

App.ApplicationView = Em.View.extend({
  doStuff: function(){
    //do your jquery here, the element is in the page now
  }.on('didInsertElement')
});

This pattern can be applied for other views as well throughout your app

App.FooView = Em.View.extend({
  doStuff: function(){
    // do some crazy stuff cause the foo template has been inserted!
  }.on('didInsertElement')
});