Knockoutjs forest中的Bootstrap 3選項卡

我有一個bootstrap nav-tab由knockoutjs填寫foreach。Knockoutjs forest中的Bootstrap 3選項卡

<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循環內。

導航活動類根據我輸入的鏈接而變化，但選項卡不變。

我該如何解決這個問題？

來源

2015-05-28 gravi

這些綁定設置'threshold_list'中的第一項爲活動狀態，它們不依賴於您輸入的鏈接。將CSS綁定在一個observable上，而不是'$ index'上。 – Tomalak

你能寫一個例子嗎？ – gravi

嘗試是這樣的，因爲有一些語法錯誤（固定）

視圖模型：

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

型號流行版本

工作提琴手內引導標籤here

來源

2015-05-28 08:08:08

小提琴中的這個例子的作品，謝謝，但不是在我的上下文中。我有同樣的不良行爲。當關閉此標籤所在的模式並再次打開時，我只能切換最後一個標籤，因此在僅示例標籤3或標籤4中，即使我點擊標籤1或標籤2，標籤內容也不會切換。 – gravi

它似乎並不是我的情況，檢查添加小提琴。使用上面的小提琴重現您的問題，並讓我們知道（如果您仍然面臨問題）。 –

現在好了它的工作原理。

我沒有正確處理加載動態模態的observableArray。

現在，當一個模態隱藏，我將它從數組中刪除。

謝謝大家

來源

2015-05-28 09:46:43 gravi

Knockoutjs forest中的Bootstrap 3選項卡

回答

相關問題