Combine href, click and data-bind in knockoutjs

Question

I'm trying to show some kind of loader while waiting for a slow link:

<a href="/api/action/that/takes/some/time" data-bind="click: showLoading">

this.showLoading = function () {
    // Display loader while waiting for the redirect
}

The click seems to override the actual link. Is there a way to fix that?

Clarification edit: I could do something like this, but I'd prefer to keep the url on the href and just add the showLoading bit to those links that will take some time

<a href="#" data-bind="click: showLoading.bind($data, '/api/action/that/takes/some/time'">

this.showLoading = function(link) {
    // Display loader while waiting for the redirect
    window.location.href = link;
};

Answer 1

You just need to return true from your click handler to trigger the browser's default action:

this.showLoading = function () {
    // Display loader while waiting for the redirect
    return true;
}

See it also in the documentation: Allowing the default click action