2013-02-27 3 views
1

내 백본에 탭을 클릭 예상하고 적절한 뷰를 렌더링으로 경로가 Work 앱 주소 표시 줄에 일치하는 URL이 있습니까? 예 : mydomain.com/app.html#section/about "정보"탭이 강조 표시됩니다. 어쩌면 나는 뭔가를 간과하고 있을지도 모르며, 아마 위의 것은 광기이며 전혀 모범 사례가 아닙니다. 응용 프로그램의 모형 부착은 두 가지 경로 기능

:

enter image description here

+0

마지막을 테스트하지. 'Backbone.Router' 인스턴스에서'navigate' 메소드를 호출해야합니다. – neebz

+0

@nEEbz,'Backbone.history'는'navigate' 메소드를 가지고 있습니다. 'Router.navigate'는 그것을 내부적으로 호출합니다. – jevakallio

답변

1

내가 당신의 탭 링크 가정합니다은 다음과 같이 보일 :

<ul> 
    <li><a href="#section/home">Home</a></li> 
    <li><a href="#section/products">Products</a></li> 
</ul> 

당신은 탐색 링크의 click 이벤트를 잡을 안 즉, switchView 및 연관된 이벤트 바인딩을 제거하십시오. 대신 Backbone.history에 해시 변경을 포착하고 경로를 트리거해야합니다.

탭 변경 동작을 구현하려면보기에서 route 이벤트를 구독 할 수 있습니다. 이렇게하면 탭 링크가 트리거 한 탭 변경 사항과 기타 URL 변경 사항이 처리됩니다.

var TabView = Backbone.View.extend({ 
    initialize: function() { 
    this.listenTo(Backbone.history, 'route', this.onRouteChanged); 
    }, 

    onRouteChanged: function() { 

    //get current url hash part 
    var hash = Backbone.history.getHash(); 

    //find the link that has a matching href attribute 
    var $activeTab = this.$("a[href=#'" + hash + "']"); 

    //if route matched one of the tabs, update tabs. 
    if($activeTab.is("a")) { 

     // First remove selected status on all tabs 
     this.$('li.selected').removeClass('selected'); 

     // Then select the clicked tab 
     $activeTab.parent().addClass('selected'); 
    } 
    } 
}); 

// 코드 샘플은 내가 Backbone.History``에 대한`navigate` 방법이 없었다 확인

+0

감사합니다. – jlowgren