javascript - Bootstrap radio tabs not working with Knockout -

javascript - Bootstrap radio tabs not working with Knockout -

i tried utilize bootstrap radio button info toggle tabs, render of dom happens through knockout. tab not seem switch between active , inactive tab correctly.

here working example: http://jsfiddle.net/msurguy/x8gvj/

here how recreate 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 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 problem in image below well. ideas on how correctly bootstrap radio tabs work?

you need reconsider approach trying utilize : here's beautiful solution ryan niemeyer can refer to..

http://jsfiddle.net/rniemeyer/cgmtv/

you need rewrite code in next format.

var section = function (name, selected) { this.name = name; this.isselected = ko.computed(function() { homecoming === 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 first section self.selectedsection(self.sections()[0]); } ko.applybindings(new viewmodel());

javascript jquery css twitter-bootstrap knockout.js