content not loading on refreshing blog post - ember.js - ember.js

Question

I am kind of stuck and can't figure out why the blog post is not reloading on refresh. I know it has to do with the App.PostRoute but can't seem to see what is wrong with it.
App.Router.map(function() {
this.resource('about');
this.resource('posts', function() {
this.resource('post', { path: ':post_id' });
});
});
App.PostsRoute = Ember.Route.extend({
model: function() {
return $.get('/posts').then(function(data) {
return data.posts.map(function(post) {
return post;
});
});
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
var posts = this.modelFor('posts');
return posts.findBy('id', params.post_id);
}
});

Answer 1

Tried your js code and it seems to work fine, so i guess it's probably the templates.
http://emberjs.jsbin.com/jivudadewihe/1/edit
hbs
<script type="text/x-handlebars" data-template-name="posts">
<ul>
{{#each post in model}}
<li>
{{#link-to "post" post.id}}
{{post.title}}
{{/link-to}}
</li>
{{/each}}
</ul>
<hr/>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="post">
{{this.id}}<br/>
{{this.title}}
</script>
js
App = Ember.Application.create();
App.Router.map(function() {
this.resource('about');
this.resource('posts', function() {
this.resource('post', { path: ':post_id' });
});
});
App.IndexRoute = Ember.Route.extend({
redirect:function(){
this.transitionTo("posts");
}
});
var postsData = [
{id:"1",title:"post1"},
{id:"2",title:"post2"},
{id:"3",title:"post3"}
];
App.PostsRoute = Ember.Route.extend({
model: function() {
return $.get('').then(function(data) {
return postsData.map(function(post) {
return post;
});
});
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
var posts = this.modelFor('posts');
return posts.findBy('id', params.post_id);
}
});