ember.js statemanager用于选项卡

Question

我有3个标签导航，每个标签的内容明显不同。 我正在考虑在Emberjs中使用StateManager来管理我的标签视图。

http://docs.emberjs.com/#doc=Ember.StateManager&src=false

这是一个好主意吗？ 还是那里有更好的路由器？ 我看过

1. SproutCore的路由
2. 烬，routemanager

那些比国家经理更好吗？ 不使用statemanager的原因是什么？

Answer 1

您可以沿此方式使用某些东西，请参见http://jsfiddle.net/pangratz666/e3wM7/ ：

车把

<script type="text/x-handlebars" >
    <ul>
        <li {{action "showFirst" target="App.stateManager"}} >First tab</li>
        <li {{action "showSecond" target="App.stateManager"}} >Second tab</li>
    </ul>
    <div class="tab-content" ></div>
</script>

<script type="text/x-handlebars" data-template-name="first" >
    first
</script>
<script type="text/x-handlebars" data-template-name="second" >
    second
</script>​

JavaScript ：

App.stateManager = Ember.StateManager.create({
    rootElement: '.tab-content',
    initialState: 'firstTab',

    showFirst: function(manager) {
        manager.goToState('firstTab');
    },
    showSecond: function(manager) {
        manager.goToState('secondTab');
    },

    firstTab: Ember.ViewState.create({
        view: Ember.View.extend({ templateName: 'first' })
    }),
    secondTab: Ember.ViewState.create({
        view: Ember.View.extend({ templateName: 'second' })
    })
});​

---

还请参阅博客文章Ember.js App Part I Redux的剖析：布线和插座 。