emberjs嵌套路由返回未定义的对象,但定义了该对象

时间:2013-04-09 22:14:20

标签: ember.js handlebars.js

我在 jsfiddle 中有如下所示的路由结构。当显示应用程序模板下方显示此问题时,我点击了帖子链接,它会抛出错误:

Uncaught Error: assertion failed: Cannot call get with 'id' on an undefined object. 

此错误是由“post”资源引起的,当我将其更改为下面的代码时,所有内容都会运行

 this.resource('post', function(){});

但是我希望它以下面显示的形式出现,抛出错误,未定义的对象:

 this.resource('post', {path: 'posts/:post_id/'}, function(){})

这是整个路由器和jsfiddle

EmBlog.Router.map(function() {
  this.resource("posts", {path: '/posts'}, function(){
    this.route('new');
    this.route('edit', {path: '/:post_id/edit'});

    this.resource('post', {path: 'posts/:post_id/'}, function(){
      this.resource('comments', {path:  '/comments'}, function(){
         this.route('new');
         this.route('edit', {path: ':post_id/comment/:comment_id'});
         this.route('comment', {path: ':post_id/comment'});
      });
    });

  });
});

在我运行EmBlog.Router.router.recognizer.names

的控制台中
 Object {post.index: Object, posts.new: Object, posts.edit: Object, comments.new: Object, comments.edit: Object, comments.comment: Object…}

这是把手模板

 <script type="text/x-handlebars" data-template-name="application">
  <h1>Hello from Application template</h1>
  <p>{{#linkTo posts.index}}Posts{{/linkTo}}</p>
  {{outlet}}
 </script>

 <script type="text/x-handlebars" data-template-name="posts">
  <h1>Hello from posts template</h1>
  <p>{{#linkTo post.index}} MyPost{{/linkTo}}</p>
  {{outlet}}
 </script>

 <script type="text/x-handlebars" data-template-name="post">
  <h1> Hello from a single post template</h1>
   <p>{{#linkTo comments.index}}  comments{{/linkTo}}</p>
  {{outlet}}
 </script>

2 个答案:

答案 0 :(得分:1)

您在post资源上定义了动态细分。这意味着如果要链接到它,则需要使用post模型。

示例:

{{#each postRecord in model}}
  {{#linkTo "post.index" postRecord}}{{postRecord.title}}{{/linkTo}}
{{/each}}

这是updated fiddle

答案 1 :(得分:1)

除了Teddy Zeeny所说的,我还要将路由器更改为

EmBlog.Router.map(function() {
  this.resource("posts", {path: '/posts'}, function(){
    this.route('new');

    this.resource('post', {path: '/:post_id'}, function(){
      this.route('edit', {path: '/edit'});
      this.resource('comments', {path:  '/comments'}, function(){
        this.route('new');
        this.resource('comment', {path: '/:comment_id'}, function() {
          this.route('edit', {path: '/edit'});
        });
      });
    });
  });
});

或至少

EmBlog.Router.map(function() {
  this.resource("posts", {path: '/posts'}, function(){
    this.route('new');

    this.resource('post', {path: '/:post_id'}, function(){
      this.route('edit', {path: '/edit'});
      this.resource('comments', {path:  '/comments'}, function(){
        this.route('new');
        this.route('edit', {path: ':post_id/comment/:comment_id'});
        this.route('comment', {path: ':post_id/comment'});
      });
    });
  });
});

清理东西。

(很抱歉将此作为答案发布,但代码示例对于评论来说太长了。)