CODEWITHSUNDEEP
ember.jshandlebars.js
brg
brg

Reputation: 3953

emberjs nested route returning undefined object but the object is defined

I have the routing structure shown below in this jsfiddle. When the application template shown lower down this question is displayed and I click on the posts link, it throws the error:

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

This error is caused by the 'post' resource and when I change it to the code below, everything runs

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

But I want it in the form shown below, which throws and error, undefined object:

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

This is the entire router and the 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'});
      });
    });

  });
});

In the console when I run EmBlog.Router.router.recognizer.names

 Object {post.index: Object, posts.new: Object, posts.edit: Object, comments.new: Object, comments.edit: Object, comments.comment: Object…}

This are the handlebars template

 <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>

Upvotes: 1

Views: 1952

Answers (2)

Teddy Zeenny
Teddy Zeenny

Reputation: 3971

You defined a dynamic segment on the post resource. This means that if you want to link to it, you need to pass the post model with it.

Example:

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

Here's the updated fiddle

Upvotes: 1

Finn MacCool
Finn MacCool

Reputation: 808

in addition to what Teddy Zeeny said, i'd also change the router to

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'});
        });
      });
    });
  });
});

or at least

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'});
      });
    });
  });
});

to clean things up.

(sorry for posting this as an answer, but the code samples are just too long for a comment.)

Upvotes: 1

Related Questions