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) {
        this.name = 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
        self.selectedSection(self.sections()[0]);
    }
    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" />
                </a>
            </li>
         </ul>
         <div class="tab-content" data-bind="foreach: sections">
            <div class="tab-pane" data-bind="css: { active: isSelected }">
                <span data-bind="text: 'In section: ' + name" />
            </div>
         </div>
    </div>
    
    .

    Answered on December 19, 2018.
    Add Comment


  • Your Answer

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