CODEWITHSUNDEEP
javascriptember.jsember-old-router
Gaurav Shetty
Gaurav Shetty

Reputation: 461

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

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.

Upvotes: 3

Views: 1400

Answers (2)

Ram
Ram

Reputation: 41

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);
    });
  }

});

Upvotes: 2

Gaurav Shetty
Gaurav Shetty

Reputation: 461

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.

Upvotes: 2

Related Questions