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

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

这里有一些资源&插件有关恩贝尔实施标签：

• ivy-tabs插件：标签有无路由（选择一个选项卡不过渡到路线）
• bootstrap-for-ember插件：一个（非常）更完整插件与标签的支持（with和without路由）

恕我直言使用的路线始终是一个最好的选择。

这里也即将在灰烬路线执行标签更完整的讨论：http://discuss.emberjs.com/t/tabbed-ui-with-routing/7336

希望它可以帮助