Question

我对于ember移动应用程序来说是全新的。

我正在试图制作标签，但我无法做到。

我的.hbs文件

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

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

先谢谢。

Answer 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的内容将被切换。

Answer 2

以下是一些资源和关于在Ember中实现Tabs的插件：

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

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

以下是关于在Ember中使用路由实现Tabs的更完整的讨论：http://discuss.emberjs.com/t/tabbed-ui-with-routing/7336

希望有所帮助

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

2 个答案: