Sammyjs, Knockoutjs и Bootstrap вкладки

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> 

И потом, я хочу добавить Knockout, о котором я говорил в это 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, но не могу. Вот моя реализация ...

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 это ...

<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> 

Может кто-нибудь помочь мне, пожалуйста ...

UPDATE 1
мне удалось достичь некоторых основных Маршрутизация, которая работает несколько хорошо, но после обновления, BAM! ... страница идет пустая .... моя реализация заключалась в том, чтобы попытаться переключить сами вкладки, потому что я понял, что активный класс навигации меняется appr соответственно при изменении вкладок, но наоборот не происходит. так, как я могу изменить свой код ниже, чтобы достичь приятной желательной маршрутизации?

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 на якорь тег, который с нокаутом, вы хотите добавить это к атрибуту данных связывания:

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

делает весь якорь выглядеть следующим образом:

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