Geek asks and answers

How to use dynamic segments in EmberJS 2.2 router?

I cannot figure out how to create routes with dynamic segments in the new router API for EmberJS. I spent a week on it and tried many things, but it did not work. I am really disappointed in myself because I have looked through documents, APIs and source code many times and cannot figure out how to do this. I am dying for help.

I am trying to do the following routes:

  • / profile /: userId → index
  • / profile /: userId / activity → Activity page
  • / profile /: user ID / ...

My router is configured this way

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

Then, when I try to associate with an assistant linkTo, I get the following error:Uncaught More objects were passed than dynamic segments

<li>{{#linkTo "profile.index" user}}overview{{/linkTo}}</li>

user, Uncaught Error: assertion failed: Cannot call get with 'id' on an undefined object. (, )

,

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

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

JSBin

, URL- ( ):

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

:

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

/profile/1:

{{#linkTo userprofile.index user}}

/profile/1/activity:

{{#linkTo userprofile.activity user}}
+4

More articles:


All Articles