Anchor tag not working in Single Page Application

Question

My application is a single page application using the Hot Towel template (durandal.js, knockout.js, require.js). I am trying to use an anchor to change to another view, but it is not working. I am using a data-bind (attr property) in an anchor tag with knockout and calling the showAbout method. Here is my html-

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

My 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);
    }
});

When I mouseover on the anchor, I see the entire activate function, and not the #/about that I was expecting. What is wrong here?

RainerAtSpirit RainerAtSpirit · Accepted Answer · 2013-07-09T19:38:12

showAbout is a function so this is the expected outcome, isn't it? You might try showAbout() instead, but you'd have to check if the return value of router.activate is the hash you're looking for.

If you could setup non security sensitive entries via router.map earlier, than you wouldn't need a function at all and could simply use data-bind="attr: { href: '#About'}">About</a>.

Anchor tag not working in Single Page Application

2 Answers