Emberjs Router: state does not change when the url hash is changed

Question

Emberjs core has a new router implementation which extends Ember.StateManager. This is the basic router I have currently implemented (using coffeescript):

Emee.set "stateManager", Ember.Router.create
    location: "hash"
    enableLogging: true

    start: Ember.State.extend
        index: Ember.State.extend
            route: "/"
            connectOutlets: (manager) ->
                console.log(manager)

        tasks: Ember.State.extend
            route: "/tasks"

            index: Ember.State.extend
                route: "/"

            show: Ember.State.extend
                route: "/show"

        users: Ember.State.extend
            route: "/users"

            index: Ember.State.extend
                route: "/"

Emee is my Ember namespace. I have a couple of questions:

1) When a page is loaded with a url with a hash http://localhost:3000/#tasks it moves to the correct start.tasks.index state, but on hashChange it just sends a message to the routePath of the current state. Emee.stateManager.route("/tasks") also does the same thing. It does not change the state and sends a message to routePath of the current state. Do we need to implement routePath ourselves? If not how do we change state by providing a route?

2)I see a lot of changes to which function will be called upon entering state. As of now "connectOutlets" seems to be the name of the function being called on entering state. Is this now the correct page to setup controllers?

UPDATE

Updated ember code to the latest revision. My router now looks like this:

Emee.Router = Ember.Router.extend
    location: "hash"
    enableLogging: true

    root: Ember.State.extend
        index: Ember.State.extend
            route: "/"
            redirectsTo: 'tasks.index'

        tasks: Ember.State.extend
            route: "/tasks"

            index: Ember.State.extend
                route: "/"
                connectOutlets: (manager) ->
                    console.log("in index");

            show: Ember.State.extend
                route: "/show"
                connectOutlets: (manager) ->
                    console.log("in show");

        users: Ember.State.extend
            route: "/users"

            index: Ember.State.extend
                route: "/"

Emee.initialize()

The browser forward and back buttons still don't work. They call routePath which just returns because they are all leaf nodes. I think I am missing something small but have not been able to put my finger on it.

Found this gist explaining the ember workflow: https://gist.github.com/2728699 will update my app accordingly and post results. — Gaurav Shetty, May 25 '12 at 15:42

score 2 · Accepted Answer · answered May 26 '12 at 11:32

2

This seems to be a bug in the current implementation of the router Check out the comment left by the developers at https://github.com/emberjs/ember.js/issues/887#issuecomment-5946213 for a workaround.

answered May 26 '12 at 11:32

Gaurav Shetty

461
4
10

score 2 · Answer 2 · answered Jun 08 '12 at 11:21

Finally nailed it :) As of 0.9.8.1, we need to tweak the workaround provided by https://github.com/emberjs/ember.js/issues/887#issuecomment-5946213. Fix as follows, change "implementation" to "style" while creating Ember.Location object.

Ember.Application.reopen({
  setupStateManager: function(stateManager) {
    var location = Ember.get(stateManager, 'location');

    if (typeof location === 'string') {
      location = Ember.Location.create({style: location});
      Ember.set(stateManager, 'location', location);
    }

    stateManager.route(location.getURL());
    location.onUpdateURL(function(url) {
      stateManager.transitionTo('root');
      stateManager.route(url);
    });
  }

});

Emberjs Router: state does not change when the url hash is changed

UPDATE

2 Answers2