从“编辑”导航回“显示”后，URL 包含“未定义”而不是 id

我读了Ember 应用程序结构 http://emberjs.com/guides/outlets指南，现在我尝试使用 ember.js 创建一个简单的单页应用程序。

我的主页显示了一个包含 Post 对象列表的侧边栏。当我单击列表项时，在侧边栏的右侧，我会显示所选项目的只读版本。该版本有一个“编辑”按钮，可以编辑该项目。编辑版本有一个“取消”链接，可切换回只读版本。

我一切正常，但是，当导航回只读版本时，地址栏中的 URL 未正确更新。当导航回我的只读版本时，我希望网址从“example.com/#posts/123/edit”更改为“example.com/#posts/123”，但我得到的是“example.com/” #帖子/未定义'。

我尝试在“取消”事件中调用transitionTo 时提供上下文，但这不起作用。

如何导航回只读状态，同时保持 URL 指向正确的帖子 (example.com/#posts/123)？

我的大部分代码与 ember 指南中的示例相同，我的路由器和“编辑”相关代码如下所示：

App.EditPostView = Em.View.extend({
  templateName: 'edit_post'
});

App.Post = DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string'),
  published: DS.attr('boolean')
});

App.Router = Em.Router.extend({
  enableLogging: true,
  location: 'hash',
  root: Em.Route.extend({
    index: Em.Route.extend({
      route: '/',
      redirectsTo: 'posts.index'
    })
  }),
  posts: Em.Route.extend({
  route: '/posts',  # example.com/#posts
  showPost: Em.Route.transitionTo('posts.show'),
  editPost: Em.Route.transitionTo('posts.edit'),
  index: Em.Route.extend({
    route: '/',
    connectOutlets: function(router) {
    router.get('applicationController').connectOutlet('posts', App.Post.find());
    }
  }),
  show: Em.Route.extend({
    route: '/:post_id', # example.com/#posts/123
    connectOutlets: function(router, post) {
    router.get('postsController').connectOutlet('post', post);
    }
  }),
  edit: Em.Route.extend({
    route: '/:post_id/edit', # example.com/#posts/123/edit
    connectOutlets: function(router, post) {
    router.get('postsController').connectOutlet({
      viewClass: App.EditPostView,
      controller: router.get('postController'),
      context: post
    });
    },
  }),
  cancel: function(router, event) {
    router.transitionTo('show'); # Expect this to use 'example.com/#posts/123' but instead it shows 'example.com/#posts/undefined'
  }
  })
});

# edit_post.handlebars:
  <form {{action save on="submit"}}>
  ...
  {{view Em.TextField valueBinding="title"}}
  {{view Em.TextArea valueBinding="body"}}
  ...
  <a {{action cancel}} class="btn">Cancel</a>
  </form>

你缺少上下文transitionTo来电。你应该有类似的东西：

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

editPost: function (router, event) {
  var post = event.context;
  Em.Route.transitionTo('posts.edit', post);
},