Ember route transitions from one nested object to another

Question

Here is the issue I'm having.

Say you have an app with two models, Project and Post. All posts belong in a specific project. So, the paths to the posts contain the project ID as well (example.com/:project_id/:post_id).

How can I transition from post X on project A to post Y in project B? Simply calling transitionToRoute('post', postA) from post B's route will retain post B's project ID in the url.

Here's a fiddle describing my predicament. As you can see, when using the project links at the top of the page, the correct posts appear in the correct projects. However, click the link after "other post" and you'll see how Ember is happy to display the post in the context of the incorrect project.

How can I transition between these "cousin" routes in Ember?

The JS:

window.App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.Store = DS.Store.extend({
  adapter: DS.FixtureAdapter
});

App.store = App.Store.create();

App.Router.map(function(match) {
    this.resource('projects');
    this.resource('project', {path: ':project_id'}, function(){
        this.resource('post', {path: ':post_id'});
    });
});

App.Project = DS.Model.extend({
    title: DS.attr('string'),
    posts: DS.hasMany('App.Post')
});

App.Post = DS.Model.extend({
  title: DS.attr('string'),
    body: DS.attr('string'),
    project: DS.belongsTo('App.Project')
});

App.Project.FIXTURES = [
    {
        id: 1,
        title: 'project one title',
        posts: [1]
    },
    {
        id: 2,
        title: 'project two title',
        posts: [2]
    }
];

App.Post.FIXTURES = [
  {
    id: 1,
    title: 'title',
    body: 'body'

  }, 
  {
    id: 2,
    title: 'title two',
    body: 'body two'
  }
];

App.ApplicationController = Ember.ObjectController.extend({
    projects: function() {
        return App.Project.find();
    }.property()
});

App.PostController = Ember.ObjectController.extend({
    otherPost: function(){
        id = this.get('id');
        if (id == 1) {
            return App.Post.find(2);
        } else {
            return App.Post.find(1);
        }
    }.property('id')
});

And the templates:

<script type="text/x-handlebars" data-template-name="application">
    {{#each project in projects}}
    <p>{{#linkTo project project}}{{project.title}}{{/linkTo}}</p>
    {{/each}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="project">
    <h2>{{title}}</h2>
    {{#each post in posts}}
        {{#linkTo post post}}{{post.title}}{{/linkTo}}
    {{/each}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="post">
    <h3>{{title}}</h3>
    <p>{{body}}</p>
    other post: {{#linkTo post otherPost}}{{otherPost.title}}{{/linkTo}}
</script>

Kingpin2k Kingpin2k · Accepted Answer · 2013-08-06T03:07:08

I found 3 issues.
1. Your belongsTo fixture data is missing the id's they belong to.

App.Post.FIXTURES = [
{
 id: 1,
 title: 'title',
 body: 'body',
 project:1
}, 
{
  id: 2,
  title: 'title two',
  body: 'body two',
  project:2
 }
];

2. When you transition to a resource, if you only send in a single model, it will only change that resource's model, if you want to update multiple models in the path, send in all the models necessary

{{#linkTo 'post' otherPost.project otherPost}}{{otherPost.title}

3. linkTo routes should be in quotes. (in the future it won't work properly without them), see example above

http://jsfiddle.net/3V6cy/1

BTW, thanks for setting up the jsfiddle, it makes me like a million times more likely to answer a question. Good luck working with ember, we love it!

Ember route transitions from one nested object to another

1 Answers