Question

我的应用程序是使用Hot Towel模板的单页应用程序（durandal.js，knockout.js，require.js）。我试图使用一个锚来改变到另一个视图，但它不起作用。我在一个锚标签中使用数据绑定（attr属性）与knockout并调用showAbout方法。这是我的HTML -

  <li><a data-bind="attr: { href: showAbout }">About</a></li>

我的shell.js viewmodel -

 define(['durandal/system', 'durandal/plugins/router', 'services/logger', 'services/SecurityDataService'],
function (system, router, logger, SecurityDataService) {

    var HasAccess = ko.observable();

    var vm = {
        activate: activate,
        router: router,
        User: ko.observable(),
        showAbout: showAbout
    };
    return vm;

    function showAbout() {

        router.map([
            { url: 'About', moduleId: 'viewmodels/About', name: 'About', visible: false }
        ]);


        return router.activate('About'); // should show about view
    }

    function activate() {

        $.when($.getJSON('/api/security', function(data) {
            strHasAccess = "";
            if (typeof (data) == "string") {
                strHasAccess = $.parseJSON(data);
                HasAccess = strHasAccess[0].HasAccess;
                vm.User = strHasAccess[0].UserName;
                $('#spnUserName').text(vm.User);
            } else {
                HasAccess = false;
            }

            return strHasAccess;
        })).then(function (HasAccess) {

            if (strHasAccess[0].HasAccess == true) {
                router.mapNav('home');
                router.mapNav('CAApproval');
                vm.User = strHasAccess[0].UserName;
                return router.activate('home');

            }
            else {
                router.map([
                    { url: 'AccessDenied', moduleId: 'viewmodels/AccessDenied', name: 'AccessDenied', visible: false }
                ]);


                return router.activate('AccessDenied'); // should show details page of a particular folder
                log('Access Denied!', null, true);
            }
        });
    }

    function log(msg, data, showToast) {
        logger.log(msg, data, "shell.js", showToast);
    }
});

当我将鼠标悬停在锚点上时，我会看到整个激活功能，而不是我期待的＃/约。这有什么不对？

Answer 1

showAbout是一个函数，所以这是预期的结果，不是吗？您可以尝试使用showAbout()，但是您必须检查router.activate的返回值是否是您要查找的哈希值。

如果您之前可以通过router.map设置非安全敏感条目，那么您根本不需要任何功能，只需使用data-bind="attr: { href: '#About'}">About</a>。

Answer 2

<li><a href="#dummy" data-bind="click: showAbout">About</a></li>

在您的VM中

假设您有一个映射为'about'的路线

function showAbout() {
   router.navigate('about');
}

锚标记在单页应用程序中不起作用

2 个答案: