Is there an after view change hook (much like didInsertElement)?

Question

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

Answer 1

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

  <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. 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.

Answer 2

I fixed the same issue like this:

Ember.run.sync(); //force applying bindings
//run after 100ms your code
Ember.run.later(function () {
  //your code
}, 100);

EDIT: Since this is an old answer, it might be obsolete in the current EmberJS release

Answer 3

Sorry some [...] moderator deleted my original answer even though it was upvoted... shm

Original answer: Take a look at this article by Yehuda Katz http://yehudakatz.com/2011/06/11/using-sproutcore-2-0-with-jquery-ui/. It's old and some of the code needs modification to work with Ember's current api, but it's a good example on how to integrate outside frameworks and plugins with Ember.

Answer 4

You could also hook into the childViews array and observe changes on that.

Something like this works but I don't think it's a good performance practice.

childViewsArrayDidChange: function() {
  console.log("childViews-Array did change");
}.observes('childViews.@each')

Answer 5

I came up with a slightly unusual way of tackling this problem. You can make a handlebars helper that fires an event when the view portion is re-rendered. I was using Bootstrap and jqPlot and needed to be able to tell, say, when the div was available to draw a chart into. With my helper you can do this:

{{#if dataIsLoaded}}
    {{trigger didRenderChartDiv}}
    <div id="chartHost"></div>
{{/if}}