Question

我正在使用Ember.JS StateManager，我目前正在关注以下在线文档：http://emberjs.com/api/classes/Ember.StateManager.html

我已经尽力使用这个小提琴，但似乎根本无法获得任何视觉效果。我在SOF和Google做了很多搜索。

我有三个状态，有三个列表项，可以在视图中触发这些状态。我在“Application.create（{}”中放置了一个“就绪函数”，但是一旦StateManager被初始化，“就绪函数”就不会激活。我非常感谢你的输入和帮助。

这是小提琴：http://jsfiddle.net/exciter/NRmHc/12/

APP代码 $（函数（）{

    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

我觉得你想要的不是状态管理员而是路由器。有关详细信息，请查看此link。

了解Ember StateManager，我编码正确吗？

1 个答案: