javascript - Ember.js - Getting routes and models working together -

i'm learning ember.js i'm struggling figure out why routes aren't working properly.

here relevant parts of app.js:

// routes app.router.map(function() {     this.resource('posts', { path: '/posts' });    this.resource('post', { path: '/post/:id' });  });  // handle route posts list app.postsroute = ember.route.extend({      model: function() {         return app.post.findall();     }  });  // handle route single post app.postroute = ember.route.extend({      model: function(params){          return app.post.findbyid(params.id);     }  });  // post model app.post = ember.object.extend();  app.post.reopenclass({     findall: function(){          var posts = [];          $.getjson("/api/posts").then(function(response){              response.posts.foreach(function(post){                  posts.pushobject(app.post.create(post));              });          });          return posts;     },     findbyid: function(id){          $.getjson("/api/post/" + id).then(function(response){              return app.post.create(response.post);          });      } }); 

then in template have this:

<!-- post list --> <script type="text/x-handlebars" data-template-name="posts">     <div class="large-12 columns">         <h1>posts</h1>         <hr>         <ul>             {{#each post in model}}                 <li>{{#linkto 'post' post}}{{post.title}}{{/linkto}}</li>             {{/each}}         </ul>     </div> </script>  <!-- single post --> <script type="text/x-handlebars" data-template-name="post">     <div class="large-12 columns">         <h1>{{title}}</h1>         <div class="content">             {{post_content}}         </div>     </div> </script> 

i'm having few issues here. firstly, href attribute on links in post list coming out this:

#/post/<app.post:ember217>

i can fix changing post route to:

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

but when try navigate directly post using url /#/post/1 error: assertion failed: cannot call 'id' on undefined object.

finally, if leave post route how (/post/:id) visit url /#/post/1 none of post data displayed. can see correct api endpoint called , no errors shown in console.

however, if click through single post posts list post displayed uses weird url mentioned earlier - #/post/<app.post:ember217>.

if helps, json post models created from:

{"post":    {       "id":2,       "title":"second post",       "alias":"second-post",       "postedon":"2013-08-12 09:11:37",       "authorid":1,       "post_content":"post content"    }  } 

sorry know there's quite bit there - hope it's enough give clear picture of i'm doing wrong.

thank you

you receiving url #/post/<app.post:ember217> because dynamic segment /post/:id, have change yourmodel_id, in case /post/:post_id. using this, default route serialize method know want id atribute of post, in url: /post/1, /post/2 etc. , no override needed in case.

you have said changing post_id make url generation works, navigation no, when navigate url directly, problem isn't routing, think because using:

app.post.findbyid(params.id); 

you have update to:

app.post.findbyid(params.post_id); 

other problem see (don't know if typo mistake), forget return in ajax call:

findbyid: function(id){   // must return ajax     return $.getjson("/api/post/" + id).then(function(response){      return app.post.create(response.post);    });  } 

i hope helps.