使用Durandal/Knockout的Bootstrap「show.bs.tab」事件

我已經嘗試了幾個小時的各種事情，無法使其工作。基本上，我有一個選項卡窗格，我只希望在適當的選項卡處於活動狀態時加載每個窗格的內容。選項卡式窗格處於durandal視圖。使用Durandal/Knockout的Bootstrap「show.bs.tab」事件

我首先嚐試了一個正常的點擊事件，並且工作正常。問題在於，有時在導航回到該屏幕時，上次選擇的選項卡仍處於選中狀態。因此沒有發生點擊事件。因此，我認爲我只是使用bootstrap中的內置觸發事件 - 「show.bs.tab」來找出標籤何時變爲「活動」。

不幸的是沒有選擇組合或任何我嘗試過的工作。我知道觸發器是由bootstrap觸發的，因爲我已經調試過了。然而，這個事件並沒有到達我在我的視圖模型的「compositionComplete」回調中放置的事件監聽器 - 而且我知道durandal也在那裏，因爲我也調試過了。

奇怪的是，當我的聽衆代碼放置：

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
    console.log('EVENT HAS ARRIVED! ', e); 
});

直接進入引導文件剛好高於實際觸發被炒魷魚，它的工作原理。因此，必須有一些東西阻止事件在杜倫式視圖模型中到達。它是杜蘭迪爾還是淘汰賽？有沒有我錯過的東西 - 我需要使用杜蘭達或淘汰賽進行配置才能使其發揮作用？

我並不認爲HTML是問題，但只是爲了完整起見，我會後，太多：

<div class="col-md-10" id="view-details"> 

<form class="form-horizontal" role="form" data-observe="true"> 

    <ul class="nav nav-tabs"> 
     <li class="active"><a data-target="#tab1" data-toggle="tab">Tab1</a></li> 
     <li><a data-target="#tab2" data-toggle="tab">Tab2</a></li> 
     <li><a data-target="#tab3" data-toggle="tab">Tab3</a></li> 
    </ul> 

    <div class="tab-content"> 
     <div class="tab-pane active" id="tab1" data-bind="compose:{ model: 'path/to/tabs/tab1', activationData: $root.someId}"></div> 
     <div class="tab-pane" id="tab2" data-bind="compose:{ model: 'path/to/tabs/tab2', activationData: $root.someId}"></div> 
     <div class="tab-pane" id="tab3" data-bind="compose:{ model: 'path/to/tabs/tab3', activationData: $root.someId}"></div> 
    </div> 

</form>

任何幫助，將不勝感激。

感謝，邁克爾

來源

2014-04-01 michaeldd

你能解決這個問題嗎？我有同樣的問題，還沒有找到答案... –

看起來像你現在找到了答案:)。我會試試看，謝謝！ – michaeldd

我也有類似的問題，我的工作圍繞的解決辦法是重寫引導顯示功能。根據你使用的是什麼版本的引導，下面應該工作（唯一的區別是在this.activate回調.trigger調用）：

VAR _show = $ .fn.tab.Constructor.prototype。顯示;

$ .fn.tab.Constructor.prototype.show = function（）{ var $ this = this.element; var $ ul = $ this.closest（'ul：not（.dropdown-menu）'）; var selector = $ this.data（'target'）;

if (!selector) { 
    selector = $this.attr('href'); 
    selector = selector && selector.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7 
} 

if ($this.parent('li').hasClass('active')) return; 

var previous = $ul.find('.active:last a')[0]; 
var e = $.Event('show.bs.tab', { 
    relatedTarget: previous 
}); 

$this.trigger(e);  

if (e.isDefaultPrevented()) return; 

var $target = $(selector); 

this.activate($this.parent('li'), $ul); 
this.activate($target, $target.parent(), function() { 
    $('a[data-toggle="tab"]').trigger({ 
     type: 'shown.bs.tab', 
     relatedTarget: previous 
    }); 
}); };

來源

2014-05-02 20:05:50

謝謝，我會稍後再試。 – michaeldd

使用Durandal/Knockout的Bootstrap「show.bs.tab」事件

回答

相關問題