Keep track of tabs with knockoutjs + twitter bootstrap

Keep track of tabs with knockoutjs + twitter bootstrap

Asked on December 19, 2018 in knockout js.
Add Comment

  • 1 Answer(s)

        There are many ways to manage  this either by using bootstrap’s JS or by just having Knockout add/remove the active class.

        To do this just with Knockout , Here is one solution where the Section itself has a computed to find if it is  selected at present .

    var Section = function (name, selected) { = name;
        this.isSelected = ko.computed(function() {
            return this === selected(); 
        }, this);
    var ViewModel = function () {
        var self = this;
        self.selectedSection = ko.observable();
        self.sections = ko.observableArray([
            new Section('One', self.selectedSection),
            new Section('Two', self.selectedSection),
            new Section('Three', self.selectedSection)
        //inialize to the first section
    ko.applyBindings(new ViewModel());

        The Markup is seem like to be this :

    <div class="tabbable">
        <ul class="nav nav-tabs" data-bind="foreach: sections">
            <li data-bind="css: { active: isSelected }">
                <a href="#" data-bind="click: $parent.selectedSection">
                    <span data-bind="text: name" />
         <div class="tab-content" data-bind="foreach: sections">
            <div class="tab-pane" data-bind="css: { active: isSelected }">
                <span data-bind="text: 'In section: ' + name" />

    Answered on December 19, 2018.
    Add Comment

  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.