Databases
StackOverflow2013
Postsdbo
POGetting to know Ember StateManager, am I coding this right?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting to know Ember StateManager, am I coding this right?
    primarykey
    data
    text
    <p>I am getting my feet wet with Ember.JS StateManager, and I am currently following the online documentation at: <a href="http://emberjs.com/api/classes/Ember.StateManager.html" rel="nofollow">http://emberjs.com/api/classes/Ember.StateManager.html</a></p> <p>I have done my best with this fiddle but cannot seem to get anything visual out at all. I have done numerous searches here at SOF and Google. </p> <p>I have three states with three list item which trigger these states in view. I have placed a "ready function" within "Application.create({}" which fires, but as soon as the StateManager is initialized, "ready function" doesn't fire. I would highly appreciate your input and help. </p> <p>Here is the fiddle: <a href="http://jsfiddle.net/exciter/NRmHc/12/" rel="nofollow">http://jsfiddle.net/exciter/NRmHc/12/</a></p> <p>APP CODE $(function(){</p> <pre><code> App = Ember.Application.create({ ready: function(){ //alert("APP INIT"); } }); App.stateManager = Ember.StateManager.create({ showFirstState: function(manager){ App.stateManager.transitionTo('startupState'); }, showSecondState: function(manager){ App.stateManager.transitionTo('second'); }, showThirdState: function(manager){ App.stateManager.transitionTo('third'); }, showFourthState: function(manager){ App.stateManager.transitionTo('fourth'); }, // INIT STATE initialState: 'startupState', startupState: Ember.State.create({ templateName: 'startup', classNames: ['state','black'], enter: function() { alert("STARTUP ENTERED"); } }), second: Ember.State.create({ templateName: 'second', classNames: ['state','orange'], enter: function() { alert("SECOND ENTERED"); } }), third: Ember.State.create({ templateName: 'third', classNames: ['state','lime'], enter: function() { alert("THIRD ENTERED"); } }), fourth: Ember.State.create({ templateName: 'fourth', classNames: ['state','blue'], enter: function() { alert("FOURTH ENTERED"); } }), }); App.initialize(); }); </code></pre> <p>HTML:</p> <pre><code> &lt;!-- CHECK TO SEE IF CSS IS FUNCTIONAL &lt;div id="state" class="state blue"&gt; STATE &lt;/div&gt; --&gt; &lt;script type="text/x-handlebars"&gt; &lt;nav&gt; &lt;ul&gt; &lt;li {{action "showFirstState" target="App.stateManager"}}&gt;First State&lt;/li&gt; &lt;li {{action "showSecondState" target="App.stateManager"}}&gt;Second State&lt;/li&gt; &lt;li {{action "showThirdState" target="App.stateManager"}}&gt;Third State&lt;/li&gt; &lt;li {{action "showFourthState" target="App.stateManager"}}&gt;Fourth State&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/script&gt; &lt;script type="text/x-handlebars" data-template-name="startup"&gt; &lt;h2&gt; STARTUP STATE &lt;/h2&gt; &lt;/script&gt; &lt;script type="text/x-handlebars" data-template-name="second"&gt; &lt;h2&gt;SECOND STATE&lt;/h2&gt; &lt;/script&gt; &lt;script type="text/x-handlebars" data-template-name="third"&gt; &lt;h2&gt;THIRD STATE&lt;/h2&gt; &lt;/script&gt; &lt;script type="text/x-handlebars" data-template-name="fourth"&gt; &lt;h2&gt;THIRD STATE&lt;/h2&gt; &lt;/script&gt; </code></pre> <p>CSS:</p> <pre><code>nav { background-color:#e9e9e9; padding: 1em 0 1em 0; } nav li { display: inline; cursor: pointer; padding:0 1em 0 1em;} .state { width:700px; height:500px; margin:0 auto; padding:0; background-color:#c9c9c9; } .black { background-color:#666; } .blue { background-color:#6699cc; } .orange { background-color:#FF6600; } .lime { background-color:#CCFF33; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCombustion007
    1. USCombustion007
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGetting to know Ember StateManager, am I coding this right?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYour spelling of `tranisitionTo` is wrong. Should be `transitionTo`
      singulars
      1. POGetting to know Ember StateManager, am I coding this right?
      1. USLuke Melia
    2. COThanks Luke, aside from the misspelled "transitionTo", there were other major issues with the code which now have fixed. Now I am able to get the "stateManager.transitionTo() function" to fire for each state from main nav. I have also included "enter: function" for each state so when a state is called, I am able to see the enter function firing, however, I am unable to visually see the states changing, in other words, css is not being applied since I have different colors for each state. JSFiddle has been updated as well. Thank you.
      singulars
      1. POGetting to know Ember StateManager, am I coding this right?
      1. USCombustion007
    3. COStates are not directly view related. They are conceptual. You need to do things in the states (like connect outlets or set controller properties that views are bound to) in order to make anything happen with the view layer on state change.
      singulars
      1. POGetting to know Ember StateManager, am I coding this right?
      1. USLuke Melia
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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