想要在 Ember 应用程序中创建选项卡答案

【问题标题】：Want to Create Tab in Ember application想要在 Ember 应用程序中创建选项卡
【发布时间】：2016-06-07 15:00:55
【问题描述】：

我是 ember 移动应用程序的新手。

我正在尝试创建标签，但我无法做到。

我的 .hbs 文件

<div class="tabpanel">
    <div class="tabs">
      <div {{action "goToFirstTab"}}>First tab</div>
      <div {{action "goToSecondTab"}}>Second tab</div>
    </div>
    {{outlet}}
  </div>

当我点击它时，我已经完成了标签，它将进入另一个屏幕。我需要它，就像当我点击选项卡时它应该在同一屏幕上，即切换。

提前致谢。

【问题讨论】：

标签： javascript jquery html css ember.js

【解决方案1】：

我建议您为此使用嵌套路由。

这就是你的路由器：

this.route('tabbing', function() {
  this.route('tab1');
  this.route('tab2');
});

然后在你的tabbing.hbs:

<div class="tabpanel">
  <div class="tabs">
    {{#link-to 'tabbing.tab1' tagName="div"}}First tab{{/link-to}}
    {{#link-to 'tabbing.tab2' tagName="div"}} Second tab{{/link-to}}
  </div>
  {{outlet}}
</div>

您将 标签内容 放在子路由中。所以tab1.hbs 和tab2.hbs。所以tabbing.hbs的内容会一直存在，tab1和tab2的内容会切换。

【讨论】：

好的，所以我需要在路由目录中的 js 文件中添加制表功能？
您在router.js 中指定路由。
它给了我 synatx 错误。它不适用于 js 文件:(:(
请帮助我。你能提供我喜欢的分步代码吗。我需要在我的 hbs 文件中添加什么，js 文件
You just copy that code..

【解决方案2】：

这里有一些关于在 Ember 中实现选项卡的资源和插件：

ivy-tabs 插件：没有路由的选项卡（选择选项卡不会转换到路由）
bootstrap-for-ember 插件：一个（非常）更完整的插件，支持标签（with 和 without 路由）

恕我直言，使用路线始终是最佳选择。

这里还有一个关于在 Ember 中实现带有路由的选项卡的更完整的讨论：http://discuss.emberjs.com/t/tabbed-ui-with-routing/7336

希望对你有帮助

【讨论】：