Bootstrap 3 tab in Knockoutjs foreach

У меня есть ботстрап nav-tab, населенный knockoutjs foreach.Bootstrap 3 tab in Knockoutjs foreach

<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 на наблюдаемом, а не на '$ index'. – Tomalak

Можете ли вы написать пример, пожалуйста? – gravi

Попробуйте что-то вроде этого, поскольку есть некоторые синтаксические ошибки (фиксированный)

ViewModel:

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

Bootstrap Вкладки внутри Model-поп версии

Работа скрипача here

источник

2015-05-28 08:08:08

Этот образец в Fiddle работает, спасибо, но не в моем контексте. У меня такое же плохое поведение. Когда вы закрываете модальный, где находятся эти вкладки, и открывайте его снова, я могу переключать только последние вкладки, поэтому в вашем примере только tab3 или tab4, и даже если я нажму на tab1 или tab2, содержимое вкладки не переключится. – gravi

его, похоже, не со мной, проверьте добавленную скрипку. воспроизведите свою проблему, используя выше скрипачей и сообщите нам (если у вас все еще стоит проблема). –

Хорошо, теперь он работает.

Я не правильно обращаюсь observableArray для загрузки динамически модальных.

Теперь, когда модальные шкуры, я удаляю его из массива.

Спасибо всем

источник

2015-05-28 09:46:43 gravi

Bootstrap 3 tab in Knockoutjs foreach

ответ

Смежные вопросы