使用 Durandal/Knockout 引导“show.bs.tab”事件

Question

我已经尝试了几个小时的各种事情，但无法让它发挥作用。基本上，我有一个选项卡式窗格，我只希望在适当的选项卡处于活动状态时加载每个窗格的内容。选项卡式窗格位于 durandal 视图中。

我一开始尝试了一个正常的点击事件，并且成功了。问题是有时当导航回该屏幕时，最后选择的选项卡仍处于选中状态。因此没有发生点击事件。因此，我认为我会使用引导程序中的内置触发事件 - “show.bs.tab”，来找出选项卡何时变为“活动”。

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

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

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

直接进入触发实际触发器的上方的引导文件，它可以工作。因此，当事件位于 durandal 视图模型中时，必须有一些东西阻止事件到达。是durandal还是淘汰赛？有什么我遗漏的东西 - 我需要配置 durandal 或敲除才能使其正常工作吗？

我认为 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 选择器 = $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
    });
}); };