Knockoutjs foreach中的Bootstrap 3选项卡

Question

我有一个由knockoutjs foreach填充的bootstrap <ul class="nav nav-tabs" data-bind="foreach: threshold_list"> <li data-bind="css: $index() == 0 ? 'active' : ''"><a class="text-capitalize" data-toggle="tab" data-bind="attr: { href: '#ftabs-' + $index() }, text: name()"></a></li> </ul> 。

tab-content

<div data-bind="attr: { id: 'tab-content-' + name() }" class="tab-content"> <!-- ko foreach: threshold_list --> <div data-bind="attr: { id: 'ftabs-' + $index() }, css: $index() == 0 ? 'tab-pane fade in active' : 'tab-pane fade'"> </div> <!-- ko --> </div> ：

foreach

这两段代码都在另一个{{1}}循环中。

导航活动类会根据我键入的链接而更改，但选项卡不会更改。

我该如何解决这个问题？

Answer 1

尝试类似这样的事情，因为存在一些语法错误（已修复）

<强>视图模型：

var ViewModel = function() {
   this.threshold_list=ko.observable([1,2,3,4]);
};

ko.applyBindings(new ViewModel());

查看：

<ul class="nav nav-tabs" data-bind="foreach: threshold_list">
    <li data-bind="css: $index() == 0 ? 'active' : ''"><a class="text-capitalize" data-toggle="tab" 
        data-bind="attr: { href: '#ftabs-' + $index() }, text: $data"></a></li>
</ul>

<div data-bind="foreach: threshold_list" class="tab-content" >
        <div data-bind="attr:{ id:'ftabs-'+$index() }, css: $index() == 0 ? 'tab-pane fade in active':'tab-pane fade',text:$data">
        </div>
</div>

工作样本提琴手 here

Model-pop版本

中的Bootstrap选项卡

工作小提琴 here

Answer 2

好的，现在可以了。

我没有正确处理动态模态加载observableArray。

现在当一个模态隐藏时，我将其从数组中删除。

谢谢大家