Question

我尝试使用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));

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

Answer 1

您需要重新考虑您尝试使用的方法：这是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());

Bootstrap无线电选项卡不能与Knockout一起使用

1 个答案: