Question

this is a basic ember routing example that doesn’t update the url to /posts correct when there is a child route in posts with dynamic segments. all the other routes (including the dynamic segments) correctly update the url. if i take out the dynamic segment child route (called ‘show’, under ‘posts’) then it updates the url correctly. here’s the fiddle code : http://jsfiddle.net/inconduit/NbPpM/3/

and to view fiddle in action where it updates the urls, look here: http://fiddle.jshell.net/inconduit/NbPpM/3/show/#

to summarize – when you click ‘Posts’ the url should update to show /posts , but it does not.

here’s the javascript:

App = Ember.Application.create({
ready: function() {
        App.initialize(App.Router.create({ enableLogging: true }));
    }
});

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.Route.transitionTo('posts.index'),
        goToAbout: Ember.Route.transitionTo('about'),
        goToShowPost: Ember.Route.transitionTo('posts.index.show'),

        index: Ember.Route.extend({
            route: '/',
            redirectsTo: "posts.index"
        }),

        posts: Ember.Route.extend({

            route: '/posts',
            connectOutlets: function (router) {
                    router.get('applicationController').connectOutlet('posts', App.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

Only leaf routes are meant to be navigable (i.e. the reason posts.index wasn’t navigable is that it had a child route).

http://jsfiddle.net/NbPpM/8/
I moved posts.index.show to posts.show — the way it is here is a common pattern, at least in my experience.