Sammyjs, Knockoutjs and Bootstrap tabs

Question

I found an sample online on how to route bootstrap tabs with sammyjs. Here is the script that does the routing in the example…

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

And then, I want to add Knockout, which I referred to this webmail knockout example. The sample uses the following script to do routing…

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());

My navigation works perfect both on click and using a hashed url. The navigation active class changes depending on the link I have typed, but the tab doesn’t change. I have tried to navigate to tabs through the url but I can’t. Here is my implementation…

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());

and my html is this...

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

Could someone help me please…

UPDATE 1
I was able to achieve some basic routing, which is working somewhat well, but upon refresh, BAM!...the page goes blank....my implementation was to try switch the tabs themselves because i realized that the navigation active class changes appropriately on tab change, but the vice versa doesnt happen. so, how do i do modify my below code to achieve some nice desirable routing?

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

You need to use the data-target on your anchor tag, which with knockout, you'll want to add this to your data-bind attribute:

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

making the whole anchor look like:

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