CODEWITHSUNDEEP
ember.jsember-old-router
kraftwer1
kraftwer1

Reputation: 5731

Avoid code duplication in Ember.Router?

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());
      }
    })
  })
});

Upvotes: 1

Views: 186

Answers (2)

sly7_7
sly7_7

Reputation: 12011

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());
      }
    })
  })
});

Upvotes: 1

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

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

Upvotes: 1

Related Questions