我读了灰烬应用程序结构指导,现在我试图创建ember.js一个简单的网页应用程序。
我的主页上显示包含邮政对象的列表侧边栏。 当我点击列表项,在侧栏右侧显示我所选项目的只读版本。 这个版本有一个“编辑”按钮,这使得它可以编辑的项目。 编辑版本有一个“取消”链接,即可切换回只读版本。
我得到了这一切工作,然而,导航回只读版本时,在地址栏中的URL不能正确更新。 当浏览回到我只读版本我想到的URL,从“example.com/#posts/123/edit”到“example.com/#posts/123”改变,而是我得到“” example.com/ #帖子/未定义”。
我试图提供的“取消”事件呼唤transitionTo当上下文,但不起作用。
如何从同时保持指向合适的职位(example.com/#posts/123)网址导航回到我的只读?
我的大部分代码是相同的余烬指南中的例子中,我的路由器和“编辑”相关的代码如下所示:
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>