引导"show.bs.tab"事件与杜兰达尔/淘汰赛

Question

我已经尝试了几个小时的各种事情，但无法做到这一点。基本上，我有一个选项卡式窗格，我只希望在相应的选项卡处于活动状态时加载每个窗格的内容。选项卡式窗格位于杜兰达尔视图中。

我一开始尝试了一个正常的点击事件，这奏效了。问题是有时在导航回该屏幕时，上次选择的选项卡仍处于选中状态。因此，不会发生点击事件。因此，我认为我只会使用引导中的内置触发事件 - "show.bs.tab"来找出选项卡何时变得"活动"。

不幸的是，没有选择器组合或我尝试过的任何东西都有效。我知道触发器是由引导程序触发的，因为我已经调试了它。但是，事件没有到达我放置在视图模型的"compositionComplete"回调中的事件侦听器 - 我知道 durandal 会进入那里，因为我也调试了它。

奇怪的是，当我放置侦听器代码时：

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

直接进入实际触发器触发上方的引导程序文件，它可以工作。因此，当事件处于杜兰达尔视图模型中时，一定有什么东西阻止了事件的到达。是杜兰达尔还是淘汰赛？我错过了什么吗 - 我需要配置durandal或KNOCKOUT才能使其正常工作？

我不认为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>

任何帮助将不胜感激。

谢谢迈克尔

Answer 1

我遇到了类似的问题，我的解决方法是覆盖引导程序显示功能。根据您使用的引导程序版本，以下内容应该可以工作（唯一的区别是this.activate 回调中的.trigger调用）：

var _show = $.fn.tab.Constructor.prototype.show;

$.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
    });
}); };