Getting to know Ember StateManager, am I coding this right?

Question

I am getting my feet wet with Ember.JS StateManager, and I am currently following the online documentation at: http://emberjs.com/api/classes/Ember.StateManager.html

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.

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.

Here is the fiddle: http://jsfiddle.net/exciter/NRmHc/12/

APP CODE $(function(){

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

HTML:

    <!--    CHECK TO SEE IF CSS IS FUNCTIONAL   
    <div id="state" class="state blue">
        STATE
    </div>
    -->
    <script type="text/x-handlebars">
        <nav>
         <ul>
            <li {{action "showFirstState" target="App.stateManager"}}>First State</li>
            <li {{action "showSecondState" target="App.stateManager"}}>Second State</li>
            <li {{action "showThirdState" target="App.stateManager"}}>Third State</li> 
            <li {{action "showFourthState" target="App.stateManager"}}>Fourth State</li>
        </ul>
        </nav>
    </script>

    <script type="text/x-handlebars" data-template-name="startup">
       <h2> STARTUP STATE </h2>
    </script>


    <script type="text/x-handlebars" data-template-name="second">
       <h2>SECOND STATE</h2>
    </script>


    <script type="text/x-handlebars" data-template-name="third">
       <h2>THIRD STATE</h2>
    </script>

    <script type="text/x-handlebars" data-template-name="fourth">
       <h2>THIRD STATE</h2>
    </script>

CSS:

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

Answer 1

I get the feeling that what you want is not a statemanager but a router. Have a look at this link for further info.