Sammyjs, Knockoutjs 및 부트 스트랩 탭

Question

나는 ... 여기 예제에서 라우팅을 수행하는 스크립트입니다 방법 route bootstrap tabs with sammyjs.에 온라인

<script type="text/javascript"> 
//Update the URL with the current tabs hash 
$("#myTabs a").click(function() { location.hash = $(this).attr('href'); }); 
function ShowTab(tabname) { 
//Show the selected tab 
$('#myTabs a[href="#' + tabname + '"]').tab('show'); 
} 
// Client-side routes 
Sammy(function() { 
this.get('#:selectedtab', function() { 
ShowTab(this.params.selectedtab); 
}); 
//default to the first tab if there is no hash in the URL 
this.get('', function() { this.app.runRoute('get', '#tab1') }); 
}).run(); 
</script> 

을 샘플을 발견 그리고, 제가 언급 넉 아웃을 추가 할 이 webmail knockout example. 이 샘플에서는 다음 스크립트를 사용하여 라우팅을 수행합니다 ...

function WebmailViewModel() { 
    // Data 
    var self = this; 
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam']; 
    self.chosenFolderId = ko.observable(); 
    self.chosenFolderData = ko.observable(); 
    self.chosenMailData = ko.observable(); 

    // Behaviours  
    self.goToFolder = function(folder) { location.hash = folder }; 
    self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id }; 

    // Client-side routes  
    Sammy(function() { 
     this.get('#:folder', function() { 
      var folder = this.params.folder; 
      self.chosenFolderId(folder); 
      self.chosenMailData(null); 

      $.ajax({ 
       type: 'POST', 
       url: '/echo/json/', 
       data: { 
        json: JSON.stringify({ folder: folder }), 
        delay: 0 
       }, 
       success: function(data) { 
        self.chosenFolderData({ mails: fakeData[folder] }); 
       } 
      }); 
     }); 

     this.get('#:folder/:mailId', function() { 
      var folder = this.params.folder, 
       mailId = this.params.mailId; 

      self.chosenFolderId(folder); 
      self.chosenFolderData(null); 

      $.ajax({ 
       type: 'POST', 
       url: '/echo/json/', 
       data: { 
        json: JSON.stringify({ mailId: mailId }), 
        delay: 0 
       }, 
       success: function(data) { 
        self.chosenMailData(ko.utils.arrayFirst(fakeData[folder], function(item) { 
         return item.id == mailId;            
        }));    
       } 
      }); 
     }); 

     this.get('', function() { this.app.runRoute('get', '#Inbox') }); 
    }).run();  
}; 

ko.applyBindings(new WebmailViewModel()); 

내 탐색은 클릭 할 때와 해시 된 URL을 사용할 때 모두 완벽합니다. 탐색 활성 클래스는 입력 한 링크에 따라 변경되지만 탭은 변경되지 않습니다. URL을 통해 탭으로 이동하려했지만 시도 할 수 없습니다. 여기

UPDATE
1 내가 몇 가지 기본을 달성 할 수 있었다 ...

<div style="" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
         <ul id="myTab" class="nav nav-tabs nav-justified" data-bind="foreach: navis"> 
          <li data-bind="css: { active: $data == $root.chosenNaviId()}"><a data-toggle="tab" data-bind="text: $data, attr: { href: '#' + $data }, click: $root.goToNavi"></a></li> 
         </ul> 
        </div> 
<div style="padding-top: 20px;" id="myTabContent" class="tab-content"> 
    <div class="tab-pane fade in active" id="Home"> Home </div> 
    <div class="tab-pane fade in active" id="Aspirants"> Aspirants </div> 
    <div class="tab-pane fade in active" id="Vote"> Vote </div> 
    <div class="tab-pane fade in active" id="Results"> Results </div> 
</div> 

누군가가 제발 도와 수 ... 내 구현 ...

function ViewModel() { 
      // Data 
      var self = this; 
      self.navis = ['Home', 'Aspirants', 'Vote', 'Results']; 
      self.chosenNaviId = ko.observable(); 

      // Behaviours  
      self.goToNavi = function(navi) { location.hash = navi }; 
      self.showTab = function(navi) { $('#myTab a[href="#' + navi + '"]').tab('show');} 

      // Client-side routes  
      Sammy(function() { 
       this.get('#:navi', function() { 
        var navi = this.params.navi; 
        self.chosenNaviId(navi); 
        //alert('cant navigate tab'); 
        self.showTab(navi); 
       }); 

       this.get('', function() { this.app.runRoute('get', '#Home') }); 
      }).run();  
     }; 
     ko.applyBindings(new ViewModel()); 

은 내 HTML은 이것이다 라우팅, 다소 잘 작동하지만 새로 고침시 BAM! ... 페이지가 비어 간다 .... 내 구현은 탭 자체를 전환하려고했기 때문에 내비게이션 활성 클래스가 appr을 변경한다는 것을 깨달았습니다. opriately 탭 변경,하지만 그 반대가 발생합니다. 그래서, 어떻게 내 아래 코드를 수정하여 바람직한 라우팅을 달성 할 수 있을까요?

attr: {'data-target': '#' + $data} 

같은 전체 앵커 모양을 만들기 :

function ViewModel() { 
      // Data 
      var self = this; 
      self.navis = ['Home', 'Aspirants', 'Vote', 'Results']; 

      // Behaviours  
      self.goToNavi = function(navi) { 
       location.hash = navi; 
      }; 
      self.chosenTab = function(tabname) { 
       $('#myTab a[href="#' + tabname + '"]').tab('show'); 
      } 

      // Client-side routes  
      Sammy(function() { 
       this.get('#:navi', function() { 
        self.goToNavi(this.params.navi); 
        self.chosenTab(this.params.navi); 
       }); 

       this.get('', function() { this.app.runRoute('get', '#Home') }); 
      }).run(); 
     }; 

     ko.applyBindings(new ViewModel()); 

Answer 1

당신은 녹아웃으로, 당신은 당신의 데이터 바인딩 속성이를 추가 할 것입니다 앵커 태그에 data-target를 사용해야합니다 :

<a data-toggle="tab" data-bind="text: $data, attr: { href: '#' + $data, 'data-target': '#' + $data }, click: $root.goToNavi"></a>