带有Ember.js的动态选项卡式UI

Question

我正在开发Ember.js应用程序，我的需求之一是使用Bootstrap v3设计一个选项卡式UI。我已经在生产中使用EmberJS两个月了，所以我还是个初学者。我花了一些时间在互联网上搜索这个主题，但还没有找到任何有用的信息。

我需要能够将我的路由呈现到选项卡控件中，每个选项卡窗格都有自己的控制器/模板/视图，当我关闭选项卡窗格时，应该处理这些对象。这样，当我再次打开它们时，控制器实例就会重置等。

如何实现这种设计？在Ember.js中使用路由的动态Tabbed UI的最佳方式是什么？

Answer 1

这是我提出的解决方案。

将选项卡创建为嵌套路由：

router.js

Router.map(function() {
  this.route('tabs', { path: '/' }, function() {
    this.route('tab-one', { path: '/' });
    this.route('tab-two');
  });
});

在选项卡路由模板中添加嵌套路由的选项卡链接和出口：

选项卡.hbs

<main class="container">
  <h1>Tabs</h1>
  <ul class="nav nav-tabs">
    {{#link-to 'tabs.tab-one' tagName="li"}}
      <a href={{view.href}}>Tab One</a>
    {{/link-to}}
    {{#link-to 'tabs.tab-two' tagName="li"}}
      <a href={{view.href}}>Tab Two</a>
    {{/link-to}}
  </ul>
  {{outlet}}
</main>

这将允许您为每个选项卡分别设置控制器和模板。