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?

Did you ever solve this? If not I would definitely recommend reproducing this on [jsfiddle](http://jsfiddle.net/). — edhedges, Oct 30 '13 at 20:15
@edhedges I thinks this is about defining entry points of your web app. my app is traditional multi-page app that has HTMLs generated from a python web server(and leverages sammy.js and hash+ajax to some extent). so, my solution to this was remove `this.get('', ...)` and put `location.href = < some hash I want for this page, that is generated from the server >`. now non-hash urls aren't intercepted. — thkang, Nov 04 '13 at 06:28
You should answer the question yourself for others sake if you have resolved it. — edhedges, Nov 04 '13 at 14:58

score 10 · Answer 1 · answered Nov 07 '13 at 16:36

10

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

answered Nov 07 '13 at 16:36

robertklep

198,204
35
394
381

score 1 · Answer 2 · edited Mar 27 '14 at 20:11

1

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()

edited Mar 27 '14 at 20:11

user562529

931
1
11
19

answered Nov 07 '13 at 16:25

HILARUDEEN S ALLAUDEEN

1,722
1
18
33

You forgot to call the callback, so nothing would happen at all if there was no reload. I was so free as to edit your answer. Now it works as advertised! Thanks! – user562529 Mar 27 '14 at 20:12

score 0 · Answer 3 · answered May 28 '14 at 20:14

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();

block sammy.js from stealing 'real links'

3 Answers3