0

这是我遇到的问题。

假设您有一个具有两个模型的应用程序，即项目和发布。所有帖子都属于特定项目。因此，帖子的路径也包含项目 ID（example.com/:project_id/:post_id）。

如何从项目 A 的 X 帖子过渡到项目 B 的 Y 帖子？只需从帖子 B 的路由调用 transitionToRoute('post', postA) 将在 url 中保留帖子 B 的项目 ID。

这是描述我的困境的小提琴。如您所见，当使用页面顶部的项目链接时，正确的帖子会出现在正确的项目中。但是，单击“其他帖子”之后的链接，您会看到 Ember 如何乐于在错误项目的上下文中显示该帖子。

如何在 Ember 中的这些“表亲”路线之间转换？

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

和模板：

<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.当你过渡到一个资源时，如果你只发送一个模型，它只会改变那个资源的模型，如果你想更新路径中的多个模型，发送所有必要的模型

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

3. linkTo 路由应该用引号引起来。（将来没有它们将无法正常工作），请参见上面的示例

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

顺便说一句，感谢您设置 jsfiddle，它让我回答问题的可能性增加了一百万倍。祝您与 ember 合作愉快，我们喜欢它！

于 2013-08-06T03:07:08.787 回答