1

Ember.JS StateManagerで足を濡らしています。現在、次のオンラインドキュメントをフォローしています：http：//emberjs.com/api/classes/Ember.StateManager.html

私はこのフィドルで最善を尽くしましたが、視覚的なものはまったく得られないようです。私はここSOFとGoogleで多くの検索を行いました。

3つの状態があり、これらの状態を表示する3つのリスト項目があります。起動する「Application.create（{}」内に「ready関数」を配置しましたが、StateManagerが初期化されるとすぐに、「ready関数」が起動しません。ご入力とご協力をよろしくお願いいたします。

これがフィドルです：http：//jsfiddle.net/exciter/NRmHc/12/

アプリコード$（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; }
4

1 に答える 1

1

あなたが欲しいのはステートマネージャーではなくルーターだと思います。詳細については、このリンクをご覧ください。

于 2012-12-23T22:27:41.387 に答える