block sammy.js from stealing 'real links'

Question

I recently started using knockout.js and sammy.js to modernize my app. However I got stuck with some problems.

I have some valid links on the page - users should actually navigate to that location, instead of imitating navigation behaviors using sammy.js. I want only hash-based links to be routed by sammy.js, but it also intercepts links that does not contain any hashes.

for example, it intercepts <a href="/logout">logout</a>.

the js part that does routing is :

Sammy(function () {
    this.get('#/', function () {
         ...
    });

    this.get('#:id', function () {
         ...
    });

    this.get('', function () { this.app.runRoute('get', '#/') });
}).run();

I think this.get('' .. ) part is the culprit that invokes this behavior - I got it from knockout.js tutorial, which says that the line is necessary to allow users from other origins to properly browse my web page. the page that is ran by knockout.js code is /w/. I want sammy.js to work only in /w/ or, at least allow users to navigate to /logout. How can I accomplish this?

Answer 1

I found that if I compare the window.location to the a copy of the window location stored on start up, I can safely escape the Sammy trap. If the base urls match, I run the base route. If they don't match, I reload the window.location and unload Sammy.js.

function myUrl() {
    var url= window.location.href;
    if (window.location.hash) {
        url= url.replace(window.location.hash, "");
    }
    if (window.location.search) {
        url= url.replace(window.location.search, "");
    }
    return url;
}

...

Sammy(function () {

    var myLocation = myUrl();

    ...

    this.get('', function () { 
        if (myLocation === myUrl()) {
            this.app.runRoute('get', '#/');
        } else {
            window.location.reload(true);
            this.unload();
        }
    });
}).run();

Answer 2

You can use "around" function. There is lot of options. I suggesting to do as follows,

Let as assume there is some urls. On hitting that url you want to communicate server to the page. For example, logout url like "/logout".

Now make that url as follows

"/logout?reload=true"

So that, you can control by following Sammy's code

Sammy(function(){

    this.around(function(callback) {
        if(this.params.reload === 'true')       
           location.replace(this.path);
        else
           callback();
    });
    // Your routers are going to be here

}).run()

Answer 3

Been a while since I used Sammy, but I think you can turn off this behaviour with the disable_push_state setting:

Sammy(function() {
  this.disable_push_state = true;
  ...
});