Sharing common functionality between two controllers, the Ember.js 2.0 way

Question

Right now, I have a resource providers and I have an index and I have a route 'show' for it along with a few routes called few other routes for listing different users. Here's the full router.coffee file

Router.map ->
  @resource 'admin', ->
    @resource 'admin.providers', { path: '/providers' }, ->
      @route 'show'
      @route 'unapproved'
      @route 'approved'
      @route 'pending'

The thing is the index is simply a combination of unapproved, approved and pending pages and each is fetched using a single model with different type arguments

My initial set up direction was to create components (trying to do things Ember 2.0 way and avoid all Views) so I created unapproved-pro, approved-pro and so on which used ember-table to display things in a table. I thought I would be making these components self-sufficient, so that they would fetch the data, get next page and also other actions (like delete, or update)

Now from reading around (http://discuss.emberjs.com/t/how-to-make-ember-component-fetch-data-from-server-put-ajax-call-inside-the-component-seems-not-a-good-practise-to-handle-this/6984) , I need to supply the components with models and also keep the logic for pagination and other actions in the controllers. Which is fine. Here's the issue;

My index page is a duplication of unapproved and approved pages. Exempt for maybe the number of rows that are visible in the table. If I put certain logics like 'approve' of a provider then I would have to do this logic both for the index controller and also for the pending controller. How can I share these functionalities while keeping it DRY?

Quick note, I did originally thought that I was going to able to create self-contained components that would handle all these actions. So everything related to an unapproved_pro would be self contained in that component so that I could drop it in anywhere. And I still think this might be a valid options.

This question was cross-posted to the ember discussion page at http://discuss.emberjs.com/t/sharing-common-functionality-between-two-controllers/7632

Cameron Cameron · Accepted Answer · 2015-08-16T02:56:00

I've had a lot of success with ember services, mostly for managing some sort of globally accessible state of the user, but also for making calls to out-of-the-norm external APIs or libraries a little more adaptable.

Here are the generate commands I used to make a session service (on ember-cli 1.13.7+):

ember generate initializer session
ember generate service session

Then inside the resulting files (again ember-cli style)

// inside initializers/session.js
export function initialize(container, application) {
    // add this service to all routes
    application.inject('route', 'session', 'service:session');
}

export default {
    name: 'session',
    after: 'store',

    initialize: initialize
};

And

// inside services/session.js
import Ember from 'ember';

export default Ember.Service.extend({

    init: function () {
        // init called automatically
        console.info('Session::Service init()');
    },
    read: function () {
        // sample service function
    }

    // ... your code here
});

And later using this in a route, (it was added to all of them in this case):

// inside routes/index.js
import Ember from 'ember';

export default Ember.Route.extend({

    setupController: function () {
        this.get('session').read();
    }
});

Sharing common functionality between two controllers, the Ember.js 2.0 way

1 Answers