scheduleOne('afterRender') in a Controller.init() does not work as I thought... Why?

@Myrdhin wrote:

Hello,

My code :

// app/router.js
import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('test');
});

export default Router;

// app/pods/application/controller.js
import { scheduleOnce } from '@ember/runloop';
import Controller from '@ember/controller';

export default Controller.extend({
  init() {
    console.log('APPLICATION - INIT...');

    scheduleOnce('afterRender', () => {
      console.log('APPLICATION - AFTER RENDER...');
    });

    return this._super(...arguments);
  }
});

// app/pods/test/route.js
import { inject as service } from '@ember/service';
import Route from '@ember/routing/route';
import config from '../../config/environment';

export default Route.extend({
  ajax: service(),

  model() {
    return this.get('ajax').request(
      config.apiURL + '/api/application',
      {
        type     : 'GET',
        dataType : 'json'
      }
    );
  }
});

// app/pods/test/controller.js
import { scheduleOnce } from '@ember/runloop';
import Controller from '@ember/controller';

export default Controller.extend({
  init() {
    console.log('TEST - INIT...');

    scheduleOnce('afterRender', () => {
      console.log('TEST - AFTER RENDER...');
    });

    return this._super(...arguments);
  }
});

When a open my web console, I see:

Open http://localhost:8080/test

DEBUG: -------------------------------
DEBUG: Ember      : 3.5.1
DEBUG: Ember Data : 3.5.0
DEBUG: jQuery     : 3.3.1
DEBUG: -------------------------------

Attempting URL transition to /test
Preparing to transition from '' to 'test'
Transition #0: application: calling beforeModel hook
Transition #0: application: calling deserialize hook

APPLICATION - INIT...
TEST - INIT...

Transition #0: application: calling afterModel hook
Transition #0: test: calling beforeModel hook
Transition #0: test: calling deserialize hook

APPLICATION - AFTER RENDER...
TEST - AFTER RENDER...

Transition #0: test: calling afterModel hook
Transition #0: Resolved all models on destination route; finalizing transition.
Transitioned into 'test'
Transition #0: TRANSITION COMPLETE.

I don’t understand why my * - AFTER RENDER... logs are not at the end, after the Transition #0: TRANSITION COMPLETE..

If my model() in test/route.js does not return a Promise, all is good : “AFTER RENDER” logs are at the end…

I thought Ember was waiting for the promises to be resolved to go to the next hook (afterModel here) but my AFTER RENDER logs before it!?

Could you explain me ? Thanks.

ps: I would like to use scheduleOne('afterRender') to add/remove some classes/DOM elements but I need to do this after all rendering templates.

Posts: 1

Participants: 1

Read full topic