How to split App.Router to several independent blocks?

Question

My App.Router turns into a huge unmanageable single block of code

App.Router = Em.Router.extend({

    // 100500 pages of horrible COPY-PASTE

    gotoBlabla: Ember.Route.transitionTo('blabla'),
    blabla: Em.Route.extend({
        route '/blabla',
        connectOutlets: function (router, context) {
            router.get('applicationController').connectOutlet('blabla');
    ...
    })
    ...
    ...

Is there a way to declare routing in less verbose style and without copy-paste? How to split Router declaration into smaller independent parts?

For splitting, right, it's not a problem. But for the verbosity and copy-paste, by walking trough our router, I don't encouter this kind of pattern, as in every route a specific job is done. But perhaps for simple routes, there could be a conventional way to handle your case, which under the hodd, based on a name could create the route, and connect the appropriate outlets, and so on. Not sure it's a good idea... — sly7_7, Jul 25 '12 at 07:28
Iake a look at addons architecture briefed here also http://stackoverflow.com/questions/11391333/emberjs-develop-a-component-in-isolation-with-its-own-routing-states-which-can — sabithpocker, Jul 25 '12 at 08:39

Wesley Workman · Accepted Answer · 2012-07-25T13:03:28.050

Yea, there absolutely is. In our app, we make each top level route (term used loosely) a separate class in it's own file. We have a directory called "states" where these files reside. I've found this makes it more readable and easier to test.

For example:

// file: states/blog_posts.js

App.BlogPostsState = Ember.Route.extend({
   route: '/posts',
   /* .... */
});

// file: states/search_results.js

App.SearchResultsState = Ember.Route.extend({
   route: '/search',
   /* .... */
});

// file: states/router.js

App.Router = Em.Router.extend({
   blogPosts: App.BlogPostsState.extend(),
   searchResults: App.SearchResultsState.extend(),
   /* .... */
});

I'm unclear on what code is being copy-pasted over and over again. Typically if I find that happening I try to isolate that code into a mixin, but that's no always easy, especially in a router/statechart.

One thing that might be relavent, I'm not sure if you're aware or not, but events will travel up the state hiercharchy, so each leaf state does not necessarily have to reimplement the same event handling.

In this example, the "action" or "event handler" called "showAlpha" is valid in all three states/route locations (alpha, beta, delta). This eliminates the need to reimplement that same thing multiple times.

App.Router = Ember.Router.extend({
    showAlpha: Ember.State.transitionTo('alpha'),

    alpha: Em.Route.extend({
        route: '/alpha'
    }),
    beta: EM.Route.extend({
        route: '/beta'
    }),
    delta: Ember.Route.extend({
        route: '/delta'
    })
});

I hope that helps. I'm not sure if that covers the code that you're copy-pasting over and over again.

As I understand to make simple link to get to state `beta` or `delta` one need to write `showBeta: Ember.State.transitionTo('beta')` `showDelta: Ember.State.transitionTo('delta')` I think this is kinda copy-paste. — coxx, Jul 25 '12 at 21:23

How to split App.Router to several independent blocks?

1 Answers1