Question

I have implemented to following in ember.js. The code works up to a certain point.

The URL does not change when I enter the application at root url i.e. ‘/’ where it should go to tasks.index and reflect the changes in the url by showing #/tasks.

But it behaves correctly when I go to ‘#/tasks’ and shows the message ‘hello from index view’.

I am using Google Chrome version 19 and ember.js edge.

Any help is very much appreciated.

App = Em.Application.create({});

App.IndexView = Em.View.extend({
    template: Em.Handlebars.compile(
        'hello world from index'
    )
});

App.ShowView = Em.View.extend({
    template: Em.Handlebars.compile(
        'hello world from show'
    )
});

App.Router = Ember.Router.extend({
    location: 'hash',
    rootElement: "#my-app",
    enableLogging: true,

    root: Ember.State.extend({
        index: Ember.State.extend({
            route: '/',
            redirectsTo: 'tasks.index'
        }),

        tasks: Ember.State.extend({
            route: '/tasks',

            index: Ember.ViewState.extend({
                route: '/',
                view: App.IndexView
            }),

            show: Ember.ViewState.extend({
                route: '/show',
                view: App.ShowView
            })
        })
    })
});

App.initialize();

Answer 1

See this jsFiddle:

Code->http://jsfiddle.net/ud3323/WLcRQ/

Debug-> http://jsfiddle.net/ud3323/WLcRQ/show/

All you needed to do was change redirectsTo: 'tasks.index' to redirectsTo: 'tasks'.

You don’t need to specify the destination state’s starting route when using redirectsTo when the destination state has a starting route defined (as you’ve done).