0

我正在使用 Hot Towel Single Page Application 模板（使用 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>

我究竟做错了什么？

4

2 回答 2

3

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

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

于 2013-07-16T17:31:47.613 回答
0

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

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

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

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

Durandal 很棒，但是如果您对异步函数（promises、Q）和视图/视图模型生命周期没有很好的理解，事情很快就会变得很麻烦！

希望这可以帮助。

于 2013-07-17T02:13:54.340 回答