hooks and actions

controllers.application.js

import Ember from 'ember';

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

mixins.r.js

import Ember from 'ember';

export default Ember.Mixin.create({
	beforeModel() {this.log('beforeModel');},
  model() {this.log('model');}, 
  afterModel() {this.log('afterModel');},
  redirect() {this.log('redirect');},
  activate() {this.log('activate');},
  setupController () {this.log('setupController'); this._super(...arguments);},
  renderTemplate() {this.log('renderTemplate'); this._super(...arguments);},
  deactivate() {this.log('deactivate');},
  resetController() {this.log('resetController');},
  
  log(name) {
    let params = JSON.stringify(this.paramsFor(this.routeName));
    console.log(`${this.routeName} ${params} ${name}`);
  }, 
  
  actions: {
    loading() {this.log('loading')},
    willTransition() {this.log('willTransition');},
    didTransition() {this.log('didTransition');}
  }
});

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('zergs', function () {
    this.route('zerg', {path: '/:zerg_id'});
  });
  this.route('protoss');
});

export default Router;

routes.index.js

import Ember from 'ember';
import R from '../mixins/r';

export default Ember.Route.extend(/*R,*/ {
});
 

routes.protoss.js

import Ember from 'ember';
import R from '../mixins/r';

export default Ember.Route.extend(R, {
  
  model() {
  	this.log('model');
    return new Ember.RSVP.Promise(function (resolve) {
      return setTimeout(function () {
        resolve([]);
      }, 100);
    });
  }
  
});

routes.zergs.index.js

import Ember from 'ember';
import R from '../../mixins/r';

export default Ember.Route.extend(/*R,*/ {

});

routes.zergs.js

import Ember from 'ember';
import R from '../mixins/r';

export default Ember.Route.extend(R, {
  
  model() {
  	this.log('model');
    return new Ember.RSVP.Promise(function (resolve) {
      return setTimeout(function () {
        resolve([]);
      }, 100);
    }); 
  }
  
});

routes.zergs.zerg.js

import Ember from 'ember';
import R from '../../mixins/r';

export default Ember.Route.extend(R, {
  
  model(params) {
  this.log('model');
  return new Ember.RSVP.Promise(function (resolve) {
    return setTimeout(function () {
      resolve({id: params.zerg_id});
    }, 100);
  });
}
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
{{outlet}}

{{#link-to "protoss"}}Protoss{{/link-to}}
{{#link-to "zergs"}}Zergs{{/link-to}}
{{#link-to "zergs.zerg" 1}}Zerg 1{{/link-to}}
{{#link-to "zergs.zerg" 2}}Zerg 2{{/link-to}}

twiddle.json

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