无法在单页应用程序的 Twitter Bootstrap 可切换选项卡中设置默认值答案

【问题标题】：Can't Set Default in Twitter Bootstrap Toggleable Tab in Single Page Application无法在单页应用程序的 Twitter Bootstrap 可切换选项卡中设置默认值
【发布时间】：2013-07-14 13:49:39
【问题描述】：

我正在使用热毛巾单页应用程序模板（使用 require、durandal、knout）。在这个特定视图中，我使用的是 Twitter Bootstrap 切换选项卡，并且需要在用户首次进入视图时设置默认选定选项卡。我所拥有的不起作用。这是视图（CAApproval.html）-

           <ul class="nav nav-tabs" style="width: 45%">
                <li><a id="btnMyCert" href="#home" data-toggle="tab" data-bind="click: SelectMyCerts">My Certificates</a></li>
                <li><a id="btnAll" href="#profile" data-toggle="tab" data-bind="click: SelectAllCerts">All Pending</a></li>
            </ul>

这是视图模型 (CAApproval.js)-

 define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/CertificateDataService'],
function (logger, system, router, CertificateDataService) {
    var allCertificates = ko.observableArray();


    var activate = function () {
        logger.log('Certificate Approval View Activated', null, 'CA Approval', true);

        $('#btnMyCert a[href="#home"]').tab('toggle');

        // go get local data, if we have it
        return CertificateDataService.getallCertificates(allCertificates);

    };


    var vm = {
        activate: activate,
        allCertificates: allCertificates,
        title: 'Certificate Approvals',
        SelectMyCerts: SelectMyCerts,
        SelectAllCerts: SelectAllCerts
    };

    return vm;

    function SelectAllCerts() {
            return CertificateDataService.getallCertificates(allCertificates);
    }
    function SelectMyCerts() {
            return CertificateDataService.getMyCertificates(allCertificates);
    }
});

我什至试过把这个 jQuery 直接放在视图中（没用）-

    <script type="text/javascript">
        $(window).load(function () {
            $('#tab a[href="#btnMyCert"]').tab('show');
        });

</script>

我做错了什么？

【问题讨论】：

标签： twitter-bootstrap knockout.js requirejs single-page-application durandal

【解决方案1】：

似乎每次用户进入视图时都默认使用相同的选项卡。对于这种情况，请将 active 类添加到您希望成为默认值的列表项中。

<ul class="nav nav-tabs">
    <li class="active">
        <a id="btnMyCert" href="#home" data-toggle="tab">
            My Certificates
        </a>
    </li>    
    <li>
        <a id="btnAll" href="#profile" data-toggle="tab">
            All Pending
        </a>
   </li>
</ul>

jsFiddle：http://jsfiddle.net/KEbQa/

【讨论】：

【解决方案2】：

很高兴这有效！但是，如果您确实想从视图模型中设置活动选项卡（或为此进行任何其他 DOM 操作），如果您使用 Durandal 提供的视图回调，您将获得更好的结果； beforeBind, afterBind, viewAttached。您遇到的问题是在附加视图之前调用了您的 jQuery DOM 选择器-直到：

您的异步数据调用返回的承诺已实现
视图和视图模型已绑定（beforeBind、afterBind）
绑定的视图被组合到 DOM 中 - 之后触发 viewAttached 回调

尝试将选择器移动到视图模型中的 to viewAttached 函数。

var viewAttached = function(){ $(....) };

Durandal 很棒，但如果您对异步函数（promises、Q）和view/viewmodel lifecycle 没有很好的理解，事情很快就会变得很麻烦！

希望这会有所帮助。

【讨论】：