Question

这是我遇到的问题。

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

如何从项目A上的帖子X过渡到项目B中的帖子Y？只需从帖子B的路线中调用transitionToRoute（'post'，postA），就可以在网址中保留B的项目ID。

Here's a fiddle describing my predicament。如您所见，当使用页面顶部的项目链接时，正确的帖子会出现在正确的项目中。但是，点击“其他帖子”之后的链接，您将看到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>

Answer 1

我发现了3个问题的 1。您的belongsTo fixture数据缺少它们所属的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路由从一个嵌套对象转换到另一个嵌套对象

1 个答案: