Bootstrap無線標籤與Knockout不兼容

Question

我試圖使用Bootstrap單選按鈕數據切換標籤，我通過Knockout爲DOM渲染DOM。該選項卡似乎無法正確切換活動標籤和非活動標籤。

這裏是一個工作示例：http://jsfiddle.net/msurguy/x8GvJ/

下面是如何重現問題（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)); 

我已經在圖像描述的問題下面也是。關於如何正確獲取引導程序無線標籤的任何想法？

Answer 1

你需要重新考慮您要使用的方法：這是由Ryan尼邁耶一個美麗的解決方案，你可以參考..

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

你需要重寫代碼採用以下格式。

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