Twitter bootstrap 带有Ember.js的动态选项卡式用户界面

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

我需要能够将我的路线渲染到选项卡控件中，每个选项卡窗格都有自己的控制器/模板/视图，当我关闭选项卡窗格时，这些对象应该被释放。因此，当我再次打开它们时，控制器实例被重置，等等

---

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

以下是我提出的解决方案

将选项卡创建为嵌套管线：

router.js

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

在选项卡管线模板中为嵌套管线添加选项卡链接和出口：

制表符。哈佛商学院

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

标签

{{{#链接到“tabs.tab one”tagName=“li”}
{{/链接到}
{{{#链接到'tabs.tab two'tagName=“li”}
{{/链接到}

{{outlet}}

---

这将允许您为每个选项卡使用单独的控制器和模板。

您解决过这个问题吗？我有完全相同的要求，我也坚持认为在Ember.js中实现这一点的最佳方法。提前谢谢