Avoid code duplication in Ember.Router?

Question

My Ember.Router grows and grows and it looks like it's gonna maintain more than thirty URL routes soon. Now, a lot of these routes do the same thing, for example connecting a header outlet (in maybe 80% of all the cases).

Is there an Ember.js-way to avoid these redundancies? Or should I just move the duplicate parts into a function and call that?

Update

As you can see, there are three different routes (articles, posts and users). Two of them connect the header outlet, while the third one doesn't. Now Imagine there would be 25 routes which connect the header outlet and 5 which don't. How can I avoid these duplications?

App.Router = Em.Router.extend({
  root: Em.Route.extend({
    articles: Em.Route.extend({
      route: "/articles",
      connectOutlets: function(router) {
        router.get("applicationController").connectOutlet("header", "header");
        router.get("applicationController").connectOutlet(articles, App.Article.find());
      }
    }),
    posts: Em.Route.extend({
      route: "/posts",
      connectOutlets: function(router) {
        router.get("applicationController").connectOutlet("header", "header");
        router.get("applicationController").connectOutlet("posts", App.Post.find());
      }
    }),
    users: Em.Route.extend({
      route: "/users",
      connectOutlets: function(router) {
        // Don't connect the header here!
        router.get("applicationController").connectOutlet("users", App.User.find());
      }
    })
  })
});

Can you add a jsfiddle or some code to your question? – zentralmaschine Nov 16 '12 at 13:36 — zentralmaschine, Nov 16 '12 at 13:36

score 1 · Accepted Answer · answered Nov 16 '12 at 14:33

Just an idea.. I haven't actually tested, but I assume something similar to this would be feasible

// some custom route
var CommonRouteOrSomething = Em.Route.extend({
    route: "/",
    connectOutlets: function(router) {
        router.get("applicationController").connectOutlet("header", "header");
    }
})

App.Router = Em.Router.extend({
    root: Em.Route.extend({
        articles: CommonRouteOrSomething.extend({
            route: '/articles', // override route string
            connectOutlets: function(router) {
                // your other outlet will be connected on the super class
                this._super(router); 
                // then your actual outlet
                router.get("applicationController")
                      .connectOutlet(articles, App.Article.find());
            }
        })
        ...
     })
 })

Not sure if this will actually work; like I said it's just an idea based on an assumption

That looks pretty interesting, thank you. I'm gonna have a look at it and meanwhile see if other people also have approaches to this... — kraftwer1, Nov 16 '12 at 14:47
I'm sure you'll find better approaches, this is just a random idea :) either way, let us know what you're gonna settle with, cause this is something I'll have to do as well and I haven't thought about it until now :P — MilkyWayJoe, Nov 16 '12 at 14:51
Okay, I followed your recommendation and since nobody posted other approaches, I'll close this post... Thank you! — kraftwer1, Nov 26 '12 at 13:24

score 1 · Answer 2 · answered Nov 16 '12 at 18:34

Perhaps an other approach could be to use nested routes. Here as far as I understand, articles connect the header outlet, and posts connect the posts outlet. In order to go to posts route, I assume you first have to go the articles routes. (ie /articles/posts) That beeing said, the router will look like this:

App.Router = Em.Router.extend({
  root: Em.Route.extend({
    articles: Em.Route.extend({
      route: "/articles",
      connectOutlets: function(router) {
        router.get("applicationController").connectOutlet("header", "header");
        router.get("applicationController").connectOutlet(articles, App.Article.find());
      }, 

      posts: Em.Route.extend({
        route: "/posts",
        connectOutlets: function(router) {
          router.get("applicationController").connectOutlet("posts", App.Post.find());
        }
      }),
    }),

    users: Em.Route.extend({
      route: "/users",
      connectOutlets: function(router) {
    // Don't connect the header here!
        router.get("applicationController").connectOutlet("users", App.User.find());
      }
    })
  })
});

This would be a better approach if the OP is actually going through articles and then posts. I've already done this way a few times, but i don't know, I tend to extend things into my own micro library and work off from there. But if this is really the case (/articles/posts), then this is probably the best approach — MilkyWayJoe, Nov 16 '12 at 19:08
Yes you're right, he can choose what is better suited for him. It's really a matter of how the app is designed in term of states. Basically I would say if posts are related to one article, so, nested route is good, else, your solution is probably better. — sly7_7, Nov 16 '12 at 19:34
I'm not even sure if that 'solution' works bro, it's just an idea.. I think I use inheritance way too much sometimes :P — MilkyWayJoe, Nov 16 '12 at 19:42

Avoid code duplication in Ember.Router?

2 Answers2