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?

Answer 1

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.