我阅读了Ember Application Structure指南,现在我尝试使用ember.js创建一个简单的一页应用程序。
我的主页显示了一个包含Post对象列表的边栏。单击侧边栏右侧的列表项时,将显示所选项目的只读版本。此版本具有“编辑”按钮,可用于编辑项目。编辑版本具有“取消”链接,可切换回只读版本。
我完成了所有工作,但是,当导航回只读版本时,地址栏中的网址未正确更新。导航回我的只读版本时,我希望URL从“example.com/#posts/123/edit”更改为“example.com/#posts/123”,但我收到的是“example.com/ #posts / undefined'。
我尝试在“取消”事件中调用transitionTo时提供上下文,但这不起作用。
如何在保持网址指向正确帖子(example.com/#posts/123)的同时导航回到只读状态?
我的大部分代码与ember指南中的示例相同,我的路由器和与“edit”相关的代码如下所示:
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);
},