How do I use dynamic segments in EmberJS' 2.2 router?

Question

I can\'t figure out how to create routes with dynamic segments in the new router API for EmberJS. I\'ve spent a week on it and tried many things but it doesn\'t work. I am reall

Answer 1

JSBin example

You can structure your routes with a little bit more nesting to get the URLs you desire (and you don't need to have a return statement in your router):

App.Router.map(function() {
  this.resource("profile", function() {
    this.resource("userprofile", { path: '/:userId' }, function() {
      this.route("index", { path: '/' });
      this.route("activity", { path: '/activity' });
    });
  });
});

and then set up your routes like this:

App.IndexRoute = Ember.Route.extend({
  model: function(params) {
    return [Ember.Object.create({
      id: 1
    })];
   }
});

App.UserprofileIndexRoute = Ember.Route.extend({
  model: function(params) {
    console.log("userindex route", params);
    return Ember.Object.create({
      id: 1
    });
  },
  setupController: function(controller, model) {
    return controller.set("content", model);
  }
});

App.UserprofileActivityRoute = Ember.Route.extend({
  model: function(params) {
    return Ember.Object.create({
      id: 1
    });
  },
  setupController: function(controller, model) {
    return controller.set("content", model);
  }
});

You can link to the /profile/1 page:

{{#linkTo userprofile.index user}}

or link to the /profile/1/activity page:

{{#linkTo userprofile.activity user}}