Route Hooks

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
});

mixins.logging-route.js

import Ember from 'ember';

const o = {
  log(...args) {
    this.send('log', this.routeName, ...args)
  },
/*
  beforeModel(...args) {
    this.log('hook', 'beforeModel', args);
    return this._super(...args);
  },
  model(...args) {
    this.log('hook', 'model', args);
    return this._super(...args);
  },
  afterModel(...args) {
    this.log('hook', 'afterModel', args);
    return this._super(...args);
  },
  redirect(...args) {
    this.log('hook', 'redirect', args);
    return this._super(...args);
  },
  setupController(...args) {
    this.log('hook', 'setupController', args);
    return this._super(...args);
  },
  renderTemplate(...args) {
    this.log('hook', 'renderTemplate', args);
    return this._super(...args);
  },
*/
// this is currently broken
//  serialize(...args) {
//    this.log('hook', 'serialize', args);
//    return this._super(...args);
//  },
  actions: {},
};

[
  'beforeModel',
  'model',
  'afterModel',
  'redirect',
  'setupController',
  'renderTemplate',
  'activate',
  'deactivate',
  'didTransition',
  'error',
  'loading',
  'willTransition',
].forEach(function(name) {
  o[name] = function(...args) {
    this.log('hook', name, args);
    return this._super(...args);
  };
  o['_' + name + 'Fired'] = Ember.on(name, function(...args) {
    this.log('event', name, args);
  });
  o.actions[name] = function(...args) {
    this.log('action', name, args);
  };
});

export default Ember.Mixin.create(o)

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('main', { path: 'main/:id' }, function() {
    this.route('nested', { resetNamespace: true });
  });
  this.route('other');
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return Ember.A();
  },
  setupController(controller, model) {
    this._super(controller, model);
    this.logs = model;
  },
  actions: {
    log(...args) {
      console.log(...args);
      this.logs.pushObject(args.join(' | '));
    },
    clear() {
      this.logs.clear()
    },
    transition() {
      this.transitionTo('main', Ember.Object.create({ id: 10 }));
    },
  }
});

routes.main.js

import Ember from 'ember';
import LoggingRouteMixin from '../mixins/logging-route';

function resolveSoon(what) {
  return new Ember.RSVP.Promise(resolve => {
    Ember.run.later(null, resolve, what, 1000);
  });
}

function rejectSoon(what) {
  return new Ember.RSVP.Promise((resolve, reject) => {
    Ember.run.later(null, reject, what, 1000);
  });
}

const MainRoute = Ember.Route.extend({
  beforeModel(transition) {
//    transition.abort();
//    return Ember.RSVP.reject();
//    this.transitionTo('other');
    // return resolveSoon();
  },
  model(params, transition) {
    // transition.abort();
    const { id } = params;
    // return resolveSoon(id);
    return Ember.RSVP.resolve(id);
  },
  afterModel(model, transition) {
//        transition.abort();
    return new Ember.RSVP.Promise(resolve => {
      Ember.run.later(() => {
        resolve();
//        transition.abort(); // this breaks it
      }, 1000);
    });
    return resolveSoon(1);
//     this.transitionTo('other');
    return rejectSoon(1);
  },
  redirect(model, transition) {
//    return Ember.RSVP.reject(); // this is ignored
    // transition.abort();
    // Ember.run.later(transition, 'retry', 1000);
//    this.transitionTo('other');
  },
// this is currently broken
//  serialize(...args) {
//    const [model] = args;
//    return { id: model.id };
//  },
  actions: {
    refresh() {
      this.refresh();
    }
  }
}, LoggingRouteMixin);

// MainRoute.reopen(LoggingRouteMixin);

export default MainRoute;

routes.nested.js

import Ember from 'ember';
import LoggingRouteMixin from '../mixins/logging-route';

export default Ember.Route.extend(LoggingRouteMixin);

routes.other.js

import Ember from 'ember';
import LoggingRouteMixin from '../mixins/logging-route';

export default Ember.Route.extend(LoggingRouteMixin);

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
| {{#link-to "main" 11}}Transition In{{/link-to}}
| {{#link-to "other"}}Transition Out{{/link-to}}
| {{#link-to "main" 1}}Change Model{{/link-to}}
{{! transition doesn't work }}
| <a {{action "transition"}}>Transition</a>
| {{#link-to "nested" 1}}With Nested Route{{/link-to}}
<br>
{{outlet}}
<br>
<br>
<h3>Output</h3>
<button {{action "clear"}}>Clear</button>
<br>
{{#each model as |entry|}}
  {{entry}}
  <br>
{{/each}}

templates.main.hbs

<h2>Main Route</h2>

Model: {{model}}

<button {{action "refresh"}}>Refresh</button>

{{outlet}}

templates.nested.hbs

<h6>nested route</h6>

templates.other.hbs

<h2>Other Route</h2>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}