2

I have been using Ember's Router (v1.0.pre) with single dynamic segments and really happy with it.
So much magic.

However, I'm struggeling with multiple dynamic segments:

  • What should serialize()/deserialize() return?
  • How should the transitionTo() call and the contex there look like?

Can somebody shed some light onto this?

2
  • I'm curious to understand what Ember world means with "dynamic segment". Commented Mar 25, 2013 at 13:32
  • @Abdull, "segment" - part of URL, "dynamic" - changes depending on current state of an application. Pretty straightforward, no? Commented May 9, 2015 at 9:27

1 Answer 1

5
  • serialize and deserialize should only be implemented when your context object has custom serialization (i.e is not an ember-data model instance). So you should not have to implement these methods while using the full ember stack.

  • transitionTo should be called from routes event handlers, and the context is passed as follow:

showPost: function (router, event) {
  var post = event.context;
  router.transitionTo('posts.show', post);
}

Given the showPost event has been trigged by action helper like that:

{{#each post in controller}}
  <a {{action showPost post}}>Show post {{post.title}}</a>
{{/each}}

More complex transitions can be achieved passing several context objects (for deeply nested routes):

router.transitionTo('posts.member.comments.show', post, comment);

post & comment contexts will be passed to appropriated routes while routing will descend into nested routes.


EDIT

Without ember-data, it would look like:

posts: Ember.Route.extend({
  route: 'posts',

  member: Ember.Route.extend({
    route: '/:post_id',

    show: Ember.Route.extend({
      route: '/'
    }),

    comments: Ember.Route.extend({
      route: 'comments',

      show: Ember.Route.extend({
        route: '/:comment_id'
      })
    })
  })
})

And you would have two classes App.Post & App.Comment, with find class methods, and id instances property.

App.Post = Ember.Object.extend({
  id: null
});
App.Post.reopenClass({
  find: function (id) {
    // retrieve data, instanciate & return a new Post
  }
});

App.Comment = Ember.Object.extend({
  id: null
});
App.Comment.reopenClass({
  find: function (id) {
    // retrieve data, instanciate & return a new Comment
  }
});
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks Mike, that's how far I got right now. I'm not using ember-data so I have to do the find() myself. In your example: how would serialize()/deserialize() look in the route posts.member.comments.show?
I've added samples for emberdata-less solution. Hope this helps! :-)
Mike, thanks for the update, but in your example it's basically just 1 dynamic segment per route. My use case is: I have a dashboard with each widget being controlled by 1 controller. At the same time multiple widgets can be shown. I expect a url like: '/charts/chart1/:id/chart2/:id' So now I need to pass on multiple contexts to the route charts and have it setup each context of each controller. And here's were I'm getting into troubles.
Did you consider passing several ids (separated) rather than several segments concatenated. The url you give indicates three nested routes: charts > chart1 > chart2. It does not seems to match what you are looking for...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.