Ember routes deserialization not working on load - ember.js

Question

I'm trying to get the Ember.js routing examples working.
I have a fiddle running pretty well with a posts example.
The routes update with the id of the post and display the correct item.
The only problem is if you load the page cold with the post url, it doesn't work (doesn't show anything in the posts view).
Any idea?
Here's the fiddle: http://jsfiddle.net/bdennyw/GzYtc/5/
and the fiddle with the full url
http://jsfiddle.net/bdennyw/GzYtc/5/show/#/posts/1
Thanks
Edit: Including the js code below:
$(function () {
App.initialize(App.Router.create());
});
window.App = Ember.Application.create();
App.Post = Ember.Object.extend({
title: null,
body: null
});
App.posts = [];
App.posts.pushObject(App.Post.create({id:'0', title: "Test post 1", body: "How awesome is Ember.js"}));
App.posts.pushObject(App.Post.create({id:'1', title: "Test post 2", body: "I love working on awesome projects"}));
App.posts.pushObject(App.Post.create({id:'2', title: "Test post 3", body: "I like cats"}));
App.ApplicationController = Ember.ObjectController.extend();
App.ApplicationView = Ember.View.extend({
templateName: "application_view"
});
App.PostsController = Ember.ArrayController.extend();
App.PostsView = Ember.View.extend({
templateName: 'posts_view'
});
App.PostController = Ember.ObjectController.extend();
App.PostView = Ember.View.extend({
templateName: 'post_view'
});
App.AboutController = Ember.ObjectController.extend();
App.AboutView = Ember.View.extend({
templateName: 'about_view'
});
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
goToPostsIndex: Ember.State.transitionTo('posts.index'),
goToAbout: Ember.State.transitionTo('about'),
goToShowPost: Ember.State.transitionTo('posts.show'),
index: Ember.Route.extend({
route: '/',
redirectsTo: "posts.index"
}),
posts: Ember.Route.extend({
route: '/posts',
index: Ember.Route.extend({
route: '/',
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('posts', App.posts);
}
}),
show: Ember.Route.extend({
route: '/:post_id',
connectOutlets: function (router, post) {
router.get('postsController').connectOutlet('post', post);
},
deserialize: function(router, params) {
var id = params.post_id,
i = 0;
for (i = 0; i < App.posts.length; i += 1) {
if (App.posts[i].id === id) {
return App.posts[i];
}
}
},
serialize: function(router, context) {
var rtnVal = {},
id = context.get('id');
if (context) {
rtnVal = {post_id: id};
}
return rtnVal;
},
}),
}),
about: Ember.Route.extend({
route: '/about',
connectOutlets: function (router) {
router.get('applicationController').connectOutlet('about');
}
})
})
});
​

Answer 1

By adding the enableLogging: true property to the router, you can see the routes taken by the router. So when loading the page, here is the trace:
STATEMANAGER: Entering root
Sending event 'navigateAway' to state root.
Sending event 'unroutePath' to state root.
Sending event 'routePath' to state root.
Entering root.posts
Sending event 'routePath' to state root.posts.
Entering root.posts.show
Sending event 'routePath' to state root.posts.show.
So It does'nt go through post.index which connect the outlet of your posts. So the view responsible of diplaying posts is not shown, and finally, the view responsible of displaying a post is not shown.
You could nest the show state as a child of the posts.index state, and it works, but I don't know if it's conceptually right.