Question

I’m starting to build a very basic Ember.StateManager and having a problem with obtaining an accurate currentState. My understanding is that by the time a state’s enter callback is run, currentState.name should reflect this new state.

I’m using ember-1.0.0-pre.2.min.js

Here’s my problem:

My.Tabs = {
  init: function() {
    MY.Tabs.stateManager.transitionTo('about');

    // this logs 'about' which is correct
    console.log(this.stateManager.get('currentState.name'));
  },

  stateManager: Em.StateManager.create({
    enableLogging: true,
    start: Em.State.create({
      exit: function(stateManager) {
        // this logs 'start'
        console.log(stateManager.get('currentState.name');
      }
    }),
    about: Em.State.create({
      enter: function(stateManager) {
        // ###### HERE's THE PROBLEM ######
        // this logs 'start'...at this point shouldn't this be 'about'?
        // since I'm already in the enter callback?
        console.log(stateManager.get('currentState.name');
      },
      exit: function(stateManager) {
        return console.log("On about exit");
      }
   })
  })
};

As you can see, when I call transitionTo('about') and that state’s enter callback is run, currentState.name still reflects the original state, start.

It’s only after my transitionTo('about') that currentState.name is accurate.

Are my expectations wrong, or am I doing something wrong?

The documentation states:

After transitioning into a new state the new currentState will have its enter method called with the StateManager instance as its first argument and an object representing the transition as its second argument.

Thanks!

Answer 1

Looking at the source on github I see

enterState: function(transition) {
    var log = this.enableLogging;

    var exitStates = transition.exitStates.slice(0).reverse();
    arrayForEach.call(exitStates, function(state) {
      state.trigger('exit', this);
    }, this);

    arrayForEach.call(transition.enterStates, function(state) {
      if (log) { Ember.Logger.log("STATEMANAGER: Entering " + get(state, 'path')); }
      state.trigger('enter', this);
    }, this);

    set(this, 'currentState', transition.finalState);
  }

clearly, the currentState is set AFTER the enter method is called, which would explain what you are seeing.

You can confirm by getting the current state name in your console after the transition.