Execute code once after all views have completely rendered in Ember.js

问题

Something like document ready, but after all Ember views rendering

I am doing this right now with an override on ApplicationView didInsertElement, which seems to be working so far:

App.ApplicationView = Em.View.extend({
  didInsertElement: function() {
    // Do your magic.
  }
});

I am wondering if this is the right way for an Ember document ready, or if Ember has a more native support for this simple and very common thing.

回答1:

You can easily add a "post render" hook by reopening the base View class and adding it into the render queue.

Here's some code to show you how:

Ember.View.reopen({
    didInsertElement : function() {
        this._super();
        Ember.run.scheduleOnce('afterRender', this, this.didRenderElement);
    },
    didRenderElement : function() {
        // Override this in your View's
    }
});

回答2:

The didInsertElement is the right place, but if you want to be completely sure your render queue is completely flushed you could also listen to the afterRender event, something like this:

App.ApplicationView = Ember.View.extend({
  didInsertElement: function() {
    Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
  },

  processChildElements: function() {
    // do here what you want with the DOM
  }
});

Hope it helps.

回答3:

App.ApplicationView = Ember.View.extend({
  afterRender: function () {
    Ember.run.next(this, function () {
      // This will run one time, after the full initial render.
    });
  }
});

来源：https://stackoverflow.com/questions/18048379/execute-code-once-after-all-views-have-completely-rendered-in-ember-js

标签

ember.js