Bootstrap radio tabs not working with Knockout

Question

I tried to use Bootstrap radio button data toggle for tabs, my render of DOM for this happens through Knockout. the tab does not seem to switch between active and inactive tab correctly.

Here is a working example: http://jsfiddle.net/msurguy/x8GvJ/

Here is how to recreate the problem (JSFiddle):

<div id="tabtest" data-bind="foreach: arrayItems">
           <div data-bind="attr:{'id':'itemtab' + $index()}" class="btn-group " data-toggle="buttons-radio">
                <a data-bind="attr:{href:'#entitysearchitem' + $index()}" class="btn " style="background-color: #f5f5f5" data-toggle="tab">Item</a>
                <a data-bind="attr:{href:'#entitymemberssearch' + $index(),'data-index':$index}" style="background-color: #f5f5f5"  class="btn " data-toggle="tab">Member</a>
            </div>


                <div class="tab-content">
                <div class="tab-pane fade in " data-bind="attr:{id:'entitysearchitem' + $index()}">
                    <div class="row padding3centt">
                        <div class="col-xs-12">
                            <div class="row">
                                <div class="col-xs-1"></div>
                                <div class="col-xs-11">
                                    <ul data-bind="foreach:interests" class="list-styled">
                                        <li>
                                            <span class="fontsize80" data-bind="text:Description">
                                            </span>

                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" data-bind="attr:{id:'entitymemberssearch' + $index()}">
                   Hello i am entitymemberssearch
                </div>
            </div>
    <br/>
</div>

JS:

var myObject = [{
 "first": "John",
    "interests": [ {"Description": "Reading"}, {"Description":"Mountain Biking"}, {"Description":"Hacking"} ]
},
{
 "first": "Boy",
    "interests": [ {"Description":"Reading"}, {"Description":"Mountain Biking"}, {"Description":"Hacking"} ]
}]
var koData ={
    arrayItems :ko.observableArray()
}

ko.mapping.fromJS(myObject, {}, koData.arrayItems);
ko.applyBindings(koData, $("#tabtest").get(0));

I have described the problem in the picture below as well. Any ideas on how to correctly get the bootstrap radio tabs to work?

Rahul Patil Rahul Patil · Accepted Answer · 2014-10-12T09:46:35

You need to reconsider the approach you are trying to use : Here's a beautiful solution by Ryan Niemeyer which you can refer to..

http://jsfiddle.net/rniemeyer/cGMTV/

You need to rewrite your code in following format.

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('Section 1', self.selectedSection),
        new Section('Section 2', self.selectedSection),
        new Section('Section 3', self.selectedSection)
    ]);

    //inialize to the first section
    self.selectedSection(self.sections()[0]);
}

ko.applyBindings(new ViewModel());

Bootstrap radio tabs not working with Knockout

1 Answers