0

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>
4

1 に答える 1

0

3つの問題が見つかりました。
1. belongsTo フィクスチャ データに、所属する ID がありません。

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

2. リソースに移行するときに、1 つのモデルのみを送信すると、そのリソースのモデルのみが変更されます。パス内の複数のモデルを更新する場合は、必要なすべてのモデルを送信します。

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

3. linkTo ルートは引用符で囲む必要があります。（将来的には、それらがないと正しく動作しません）、上記の例を参照してください

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

ところで、jsfiddle を設定してくれてありがとう。質問に答える可能性が 100 万倍も高くなります。Ember と一緒に頑張ってください。大好きです!

于 2013-08-06T03:07:08.787 に答える