Not sure if the question remains valid since it has been a while. but there was no answer. I had a similar problem when I want to show a form based on a controller property. After displaying the form, I would like to run some javascript to bind event handlers.
Javascript, however, did not bind event handlers properly, as elements were not displayed when didInsertElement .
My solution is as follows:
Controller and 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(){
And pattern
<script type="text/x-handlebars" data-template-name="form"> <h2>Form</h2> <button {{action 'toggleForm'}}>Toggle form</button> {{#if myViewVisible}} {{partial "tform"}} {{else}} <p>Click button to show form</p> {{/if}} </script>
The view binds a property of the controller. As soon as this property changes, the isVisible function starts and reverses the view. Forcing didInsertElement to re-run and binding the JS code to the DOM elements that are now available.
Hope this helps.
rbevers Jun 14 '14 at 11:55 2014-06-14 11:55
source share