Using the didInsertElement
hook, I\'m able to do some jQuery plugin initialization that is needed. However, if a property changes, Ember re-renders the view, but do
Not sure if the question is still valid since it's been a while. but no answer was selected. I ran into a similar problem where I want to show a form based on a controller property. Once the form is displayed I would like to run some javascript to bind event handlers.
The Javascript however did not bind the event handlers properly since the elements were not displayed when the didInsertElement
was triggered.
My solution is the following,
Controller & View
App.FormController = Ember.Controller.extend({
myViewVisible : false,
actions : {
toggleForm : function(){
this.toggleProperty('myViewVisible');
console.log( this.get('myViewVisible') );
}
}
});
App.FormView = Ember.View.extend({
isVisible:function(){
this.rerender();
}.property('controller.myViewVisible'),
didInsertElement : function(){
// Do JS stuff
}
});
And the template
The view binds a property of the controller. Once that property changes the isVisible
function kicks in and rerenders the view. Causing the didInsertElement
to fire again and binding the JS code to the DOM elements that are now available.
Hope this helps.