CODEWITHSUNDEEP
ember.js
Jim Alateras
Jim Alateras

Reputation: 29

Problems with emberjs StateMachine and ViewState

I am having some trouble getting the state manager to toggle my views. I have a state machine, which will initially display the login screen and once the user has been authenticated the state machine will transition to the authorized state and display the workspace or dashboard. The problem is that when i load the page I don't see the login screen so i suspect i am missing something. I am using emberjs 0.9.7.1

Here is the div where i want the screens added

<body>
    <div id="main-container" class="container">
    </div>
</body>

This is the core html snippet of login_view.handlerbars file (there is more but i have omitted it fror brevity sake). I can see this compiled and stored in Ember.TEMPLATES['login_view'].

<form class="form-inline">
  <fieldset>
    <input type="text" name="email">
    <input type="password" name="password">
    <button id="sign-in-button" class="btn btn-primary">Sign In</button>
   </fieldset>
</form>

Here is the associated view javascript file

App.LoginView = Ember.View.extend({
    templateName: 'login_view'
});

Finally, here is my state machine. I see the message "Entering unauthorized state" in the console but i don't see the login html embedded within the specified div.

App.sessionStates = Ember.StateManager.create({
    rootElement: '#main-container',
    initialState: 'unauthorized',

    unauthorized: Ember.ViewState.create({
        viewClass: App.LoginView,

        enter: function(stateManager, transition) {
            console.log("Entering unauthorized state");
        },

        exit: function(stateManager, transition) {
            console.log("Exiting unauthorized state");
        }
    }),

    authorized: Ember.ViewState.create({
        view: App.WorkspaceView
    })
})

cheers

Upvotes: 0

Views: 682

Answers (2)

enyo
enyo

Reputation: 16696

Actually the docs are wrong and a bit confusing.

They tell you that you have to call this._super() if you overwrite those methods, but they forgot to specify that you have to pass the arguments as well.

I got it running with this code:

enter: function(manager, transition) {
  this._super(manager, transition);
}

or if you don't care about the arguments:

enter: function() {
  this._super.apply(this, arguments);
}

Upvotes: 1

Rajat
Rajat

Reputation: 34108

I think it should be 'view' instead of 'viewClass'

unauthorized: Ember.ViewState.create({
        viewClass: App.LoginView, // the key should be 'view'

UPDATE:

Here is a quick example fiddle showing how to use the StateManager. http://jsfiddle.net/lifeinafolder/GNr4M/

If you want to use 'enter' & 'exit' states, be sure to call super(). Ref: http://ember-docs.herokuapp.com/#doc=Ember.StateManager&src=false

Upvotes: 0

Related Questions