Question

我正在使用Hot Towel单页应用程序模板（使用require，durandal，knockout）。在此特定视图中，我使用的是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>

这是viewmodel（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>

我做错了什么？

Answer 1

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

<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/

Answer 2

很高兴有效！但是，如果您确实想要从viewmodel设置活动选项卡（或者对此进行任何其他DOM操作），那么如果您使用Durandal提供的视图回调，您将获得更好的结果; beforeBind, afterBind, viewAttached。你遇到的问题是你的jQuery DOM选择器在附加视图之前被调用 - 直到下一次才会发生：

完成异步数据调用返回的承诺
视图和视图模型已绑定（beforeBind，afterBind）
绑定视图由DOM组成 - 之后将触发viewAttached回调

尝试将您的选择器移动到viewmodel中的viewAttached函数。

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

Durandal很棒，但是如果你对异步函数（promises，Q）没有很好的理解，那么view/viewmodel lifecycle就会很快变得非常毛茸茸！

希望这有帮助。

无法在单页应用程序中的Twitter Bootstrap Toggleable选项卡中设置默认值

2 个答案: