Note that there are some explanatory texts on larger screens.

plurals
  1. POProblems with emberjs StateMachine and ViewState
    text
    copied!<p>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</p> <p>Here is the div where i want the screens added</p> <pre><code>&lt;body&gt; &lt;div id="main-container" class="container"&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>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'].</p> <pre><code>&lt;form class="form-inline"&gt; &lt;fieldset&gt; &lt;input type="text" name="email"&gt; &lt;input type="password" name="password"&gt; &lt;button id="sign-in-button" class="btn btn-primary"&gt;Sign In&lt;/button&gt; &lt;/fieldset&gt; &lt;/form&gt; </code></pre> <p>Here is the associated view javascript file</p> <pre><code>App.LoginView = Ember.View.extend({ templateName: 'login_view' }); </code></pre> <p>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.</p> <pre><code>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 }) }) </code></pre> <p>cheers </p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload