想要在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

希望它可以幫助