Emberjs: Jquery Function not being called after Handlebars Template is loaded

Question

I have an EmberJS application where I'm trying to call a jquery function that positions some div elements on a page using .css() for a specific handlebars template.

My problem is that when EmberJS loads in the template to my application (whether by url change, or {{linkTo}} , the jquery functions don't get fired. That said, if I refresh the page, they fire just fine and everything is great. Additionally, I have an event listener for if the page changes width, which will cause the function to refire, and this works fine too.

My guess is that Ember doesn't actually call the jquery function once the template is initially loaded. Anyway to get around this? I was wondering if maybe I should try to use handlebars to directly call a function from my scripts.js? Thanks for your help!

Additionally, Is this possible without leveraging Views? Maybe just with Handlebars and components?

Answer 1

You will need to put code like that in the didInsertElement method of your view. So for example if your template is project/index , you would do:

App.ProjectIndexView = Ember.View.extend({
    template: 'project/index',
    didInsertElement: function() {
    /// Your jQuery code here
    }
});