backbone.js에서 부트 스트랩 탭을 사용하여 라우팅하는 방법은 무엇입니까? 이처럼 내 index.html을 내장

Question

내가있어 여러 개의 탭 :

<div class="container"> 
    <div class="tabbable"> 
      <ul class="nav nav-pills nav-tabs"> 
       <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
       <li><a href="#new" data-toggle="tab">New Request</a></li> 
       <li><a href="#queuepane" data-toggle="tab">Queue</a></li> 
      </ul> 
     </div> 
     <div id="appTabs" class="tab-content"> 
      <div id="home" class="tab-pane active"></div> 
      <div id="new" class="tab-pane"> 
      <div id="queue" class="tab-pane"></div> 
     </div> 
    </div> 
</div> 

가 어떻게 탭이 Backbone.js 라우팅을 사용하여 클릭 할 때 URL을 변경하는 것에 대한 갈 것이라고 ?

Answer 1

온라인에서 찾은 몇 가지 제안 사항을 사용하여 해결했습니다. 여기가 커피 스크립트에 보이는 방법은 다음과 같습니다 내 라우터의 초기화 함수 내에서

:

$('.tl-navigation-tabs a').click (e) => 
    e.preventDefault() 
    @navigate("#{e.target.innerHTML}/", {replace: true, trigger: true}) 

트리거 : 사실은이 탐색-에 URL 라우터의 경로를 일치하는 경우, 또 다른 기능에 위임 할 수 있습니다 것을 의미한다. 그래서 여기에 나는 각 탭에 대한 경로가 다음 그 경로로 이동하여 호출 된 함수 내부 :

아마이 일을 더 우아한 방법이있다

$(".tl-navigation-tabs a[href='#Events']").tab('show') 

, 그러나 이것은 정확히 방법 I 작동 결국 그것을 필요로했다.

Answer 2

** 사용 데이터 대상 대신 HREF의 속성과 수동

이 (거짓 'URL')을 사용하여 Backbone.histroy.navigate을 변경해주십시오 **

http://jsfiddle.net/sedhuait/4mxmtn0d/

http://getbootstrap.com/javascript/#tabs

<li id="byNumberLi" role="presentation" class=""><a id="byNumberTabLink" data-target="#assignmentByNumberTabConent" data-toggle="tab" role="tab" ><span class="fa fa-list-alt"></span>List 
        By Number</a></li>