在从“编辑”导航回“显示”后,网址包含“undefined”而不是id [英] Url contains 'undefined' instead of id after navigating back from 'edit' to 'show'
问题描述
我阅读了 Ember应用程序结构指南,现在我尝试用ember创建一个简单的一页应用程序.js。
I read the Ember Application Structure guide and now I trying to create a simple one page application with ember.js.
我的主页显示一个包含Post对象列表的边栏。当我点击一个列表项,在侧边栏的右边我显示一个只读版本的所选项目。此版本有一个编辑按钮,可以编辑该项目。编辑版本有一个取消链接来切换回只读版本。
My home page shows a sidebar containing a list of Post objects. When I click on a list-item, on the right of the sidebar I show a read-only version of the selected item. This version has a 'Edit' button, which makes it possible to edit the item. The edit version has a 'Cancel' link to switch back to the read-only version.
然而,当导航回只读时,版本中,地址栏中的网址未正确更新。当导航回我的只读版本时,我希望网址从example.com/#posts/123/edit更改为example.com/#posts/123,而是获取example.com/ #posts / undefined'。
I got this all working, however, when navigating back to the read-only version, the url in the address bar is not updated properly. When navigating back to my read-only version I expect the url to change from 'example.com/#posts/123/edit' to 'example.com/#posts/123', but instead I get ''example.com/#posts/undefined'.
我尝试在取消事件中调用transitionTo时提供上下文,但这不起作用。
I tried to provide a context when calling transitionTo in the 'cancel' event, but that doesn't work.
如何保持url指向正确的帖子(example.com/#posts/123),如何导航回我的只读?
How can I navigate back to my read-only from while keeping the url pointing to the proper post (example.com/#posts/123)?
我的代码大部分与Ember指南中的示例相同,我的路由器和编辑相关代码如下所示:
Most of my code is identical to the example in the ember guide, my router and 'edit' related code is shown below:
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
调用。你应该有这样的东西:
You are missing the context in transitionTo
calls. You should have something like:
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);
},
这篇关于在从“编辑”导航回“显示”后,网址包含“undefined”而不是id的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!