How to extend router by mixin defined in an addon?

1

I would like to have common routes defined in an addon, which can be shared by our multiple projects. Trying to follow an approach with mixins, so far without any luck.

In the addon/mixins/common-routes.js is defined mixin:

export default Ember.Mixin.create({
   coreMap: function(self) {
      self.resource('events', function() {
          self.route('future');
          self.route('add');
      });
   } 
});

And then use this in project router.js:

import Ember from 'ember';
import config from './config/environment';
import CoreRoutes from 'core/mixins/core-router';

var Router = Ember.Router.extend(CoreRoutes, {
   location: config.locationType
});

Router.map(function() {
    this.coreMap(this);     
    //custom routes
    this.resource('events', function() {
       this.route('edit');
       this.route('add');
   });
});
export default Router;

The result is: TypeError: this.coreMap is not a function (Importing of the mixin is correct, I can debug the CoreRoutes object)

Any ideas, where Iā€™m doing wrong assumtions?

2 
// addon/utils/route-setup.js 
export default function(self) {
  self.resource('events', function() {
    self.route('future');
    self.route('add');
  }); 
});

//app/router.js
import Ember from 'ember';
import config from './config/environment';
import coreMap from 'core/utils/route-setup';

var Router = Ember.Router.extend(CoreRoutes, {
   location: config.locationType
});

Router.map(function() {
    coreMap(this);

    //custom routes
    this.resource('events', function() {
       this.route('edit');
       this.route('add');
   });
});
export default Router;
3

Thanks,

It looks much more simplistic than I expected.

M.

4

It should be noted that using self inside a nested route or resource will result in a flat route structure. In this case events, future, and add will all be individual routes. If you wish to maintain the expected behaviour of nested routing (e.g. events.future and events.add) you should use this inside the nested route:

export default function(self) {
  self.resource('events', function() {
    this.route('future');
    this.route('add');
  }); 
});
1 Like