Bootstrap无线电选项卡不能与Knockout一起使用(Bootstrap radio tabs not working with Knockout)

Bootstrap无线电选项卡不能与Knockout一起使用(Bootstrap radio tabs not working with Knockout)

我尝试使用Bootstrap单选按钮数据切换选项卡，我的DOM渲染通过Knockout发生。 选项卡似乎没有正确切换活动和非活动选项卡。

这是一个工作示例： 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));

我也在下面的图片中描述了这个问题。 有关如何正确使引导无线电标签工作的任何想法？

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?

最满意答案

您需要重新考虑您尝试使用的方法：这是Ryan Niemeyer的一个漂亮的解决方案，您可以参考..

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

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