twitter-bootstrap - 使用 Ember.js 的动态选项卡式 UI

Question

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

我需要能够将我的路线渲染到选项卡控件中，每个选项卡 Pane 都有自己的 Controller /模板/ View ，当我关闭选项卡 Pane 时，应该处理这些对象。这样当我再次打开它们时， Controller 实例就会重置等。

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

Answer 1

这是我想出的解决方案。

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

router.js

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

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

tabs.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>

这将允许您为每个选项卡拥有单独的 Controller 和模板。