Twitter에서 "활성"상태 설정 "각"도우미 렌더링 드롭 다운 항목으로 Ember에서 부트 스트랩 드롭 다운

Question

Twitter Bootstrap 및 Ember를 사용하여 하위 항목을 선택하면 드롭 다운에 "활성"상태를 설정하려고합니다. 그 자식은 "each"루프를 사용하여 렌더링되었습니다.

예 : 문장 내 네비게이션 바의

발췌문 :

ul.nav.navbar-nav 
    link-li 
    link-to 'index' | Home 
    link-li classNames='dropdown' 
    a.dropdown-toggle href='#' data-toggle='dropdown' Items <span class='caret'></span> 
    ul.dropdown-menu 
     each item in items 
     link-li 
      link-to 'item' item 
      = item.name 
     link-li 
     link-to 'items.new' | Create New... 

링크 리튬 도우미 Add "active" class to bootstrap dropdown menu when dropdown link selected (with Ember link-to)

export default Ember.Component.extend({ 
    tagName: 'li', 
    classNameBindings: ['active'], 

    active: function(){ 
    return this.get('childViews').isAny('active'); 
    }.property('childViews.@each.active') 
}); 

에서이 이러한 경우에 잘 작동 :

• 집이 강조 표시됩니다. 각 item 경로
• 새로운 링크를 만들기에 강조 할 때 items.new 경로
• 에 드롭 다운 자체가 items.new 노선에 때 강조 될 때 D는 index 노선에
• 각 항목이 강조 표시 될 때

그러나 개별 item 경로 각각에서 드롭 다운 메뉴가 표시되지 않습니다.이 강조 표시됩니다.

나는 this.get('childViews')이 "Create New"보기 만 반환한다는 것을 조사한 결과, 다른 항목을 무시한 것으로 보입니다. each 도우미와 관련이있는 것으로 보입니다. "신규 작성"아래에 추가 된 일반 링크가 정상적으로 작동하기 때문입니다. 그리고 그것이 n00b Ember 지식이 끝나는 곳입니다.

도움이 될 것입니다. 에 추가하여 강조

Router.map(function() { 
    this.resource('items', function() { 
    this.route('new'); 
    }); 
    this.resource('item', {path: '/items/:item_id'}, function() { 
    this.route('edit'); 
    }); 
}); 

내가 할 수있는 모든 관련 탐색 링크 :

Answer 1

이 같은 경로의 집합을 감안할 때 ... 나는이 하나의 해결책을 찾았지만 그것은 조금 해키 질문에서 link-li 도우미를 사용하여 숨겨진 "더미"링크. 상징의

Navbar의 조각 다음 link-to 'items' 및 link-to 'item' 더미 링크에 추가함으로써

ul.nav.navbar-nav 
    link-li 
    link-to 'index' | Home 
    link-li classNames='dropdown' 
    a.dropdown-toggle href='#' data-toggle='dropdown' Items <span class='caret'></span> 
    ul.dropdown-menu 
     span.hidden 
     link-to 'items' | Items 
     link-to 'item' | Item 
     each item in items 
     link-li 
      link-to 'item' item 
      = item.name 
     link-li 
     link-to 'items.new' | Create New... 

, 그것은 부모 link-li 도우미 일을하고 자식 경로의 활성 상태는 제대로 드롭 다운을 강조 표시합니다.

누구나보다 세련된 해결책을 제시한다면 꼭 여기에 게시하십시오!