當選擇了下拉鍊接時（通過Ember鏈接），將「活動」類添加到引導下拉菜單中

我正在使用Twitter引導程序並且有一個navbar帶有常規鏈接和下拉鍊接。使用ember的link-to助手，常規鏈接在點擊時會自動獲得「活動」類，就像下拉菜單中的菜單項一樣。然而，當我選擇其中一個下拉菜單項目時，我無法想出讓父母li標籤獲得「活動」類的最佳方式。我試過從下拉菜單中創建一個組件，但我無法讓它工作。當選擇了下拉鍊接時（通過Ember鏈接），將「活動」類添加到引導下拉菜單中

標記在.emblem：

.navbar.navbar-default.navbar-static-top 
    ul.nav.navbar-nav 

    //---------// 
    // Account // 
    //---------// 

    link-to 'admin.business.index' tagName="li" href=false 
     a href="#" Account 

    //----------// 
    // Branding // 
    //----------// 

    li.dropdown 
     a.dropdown-toggle data-toggle="dropdown" href="#" 
     ' Branding 
     span.caret 
     ul.dropdown-menu role="menu" 
     link-to 'admin.business.design' tagName='li' href=false 
      a href="#" Design 
     link-to 'admin.business.email' tagName='li' href=false 
      a href="#" Email Templates 
     link-to 'admin.business.url' tagName='li' href=false 
      a href="#" Vanity URL

我想也許我可以嵌套鏈接服務條款與

link-to 'admin.business.design' tagName='li' href=false class="dropdown"

而且使取代「品牌」包裝

li.dropdown

整個下拉元素鏈接到「admin.business.design」。

我在這裏創建了一個bin：http://emberjs.jsbin.com/cosute/2/edit?html,output。

當路線是「活動」和「品牌」下的子菜單項目時，您可以看到「帳戶」和「物品」處於活動狀態，但在其下的下拉項目時需要選擇「品牌」也是。

來源

2014-10-07 typeoneerror

請不要使用「bootstrap」標籤，請使用「twitter-bootstrap」，因爲這意味着其他 – 2014-10-12 10:09:00

JSBin

這是我使用的解決方案。使{{link-to}}成爲li，而不是使組件li。該組件利用工作灰燼確實在任何link-to活動類型設置爲當前路線：

App.NavItemComponent = Ember.Component.extend({ 
    tagName: 'li', 
    classNameBindings: ['active'], 

    active: function(){ 
     return this.get('childViews').isAny('active'); 
    }.property('[email protected]') 
});

這工作，因爲我們正在觀察所有這些都是由灰燼與傳遞的參數設置link-toactive屬性進入property()。每次更改路線時，所有link-to助手都會重新計算活動屬性。

來源

2014-10-07 19:11:11 sunrize920

的作品！不錯，最初嘗試使用組件，但不確定觀察更改的最佳方式。 'childViews。@ each.active'解決了這個問題。 – typeoneerror 2014-10-07 19:41:47

僅供參考這不再適用於1.13+請參閱：https：//github.com/emberjs/ember.js/issues/11244 – 2015-07-06 20:38:38

當選擇了下拉鍊接時（通過Ember鏈接），將「活動」類添加到引導下拉菜單中

回答

相關問題