Allowing href links with hashes on them to bypass SammyJS routing

Question

I have the following server-side URL mappings defined:

/main/item1
/main/item2

I've added SammyJS routing support so that I am able to do the following:

/main/item1#/         /* main view */
/main/item1#/topups   /* topup view */

I've set up SammyJS like so:

s.app = Sammy(function() {
    this.get('#/topups', function() {
        console.log('Initializing topups view.');
    });
    this.get('#/', function() {
        console.log('Initializing main view.');
    });
});

The problem is, I have a summary section in my page that redirects to the topup view of a different "item". E.g., I am at the url /main/item1#/, and in this page, there exists a tag <a href="/main/item2#/topups">item 2's topups</a>.

I expect to be redirected (page refresh) to the new URL, however, it seems like SammyJS is intercepting the /main/item2#/topups call and simply running the this.get('#/topups') route I've defined.

I expect that since the URL paths before the hash, /main/item1 and /main/item2 are different, the SammyJS routing won't be triggered.

Is there a way to prevent this behavior from happening in SammyJS?

Answer 1

I'm pretty sure using the full URL redirect you.

<a href="http://www.example.com/main/item2#/topups">Item 2 top ups for the lazy coder</a>

However, that will cause the page to reload. If you modify Labib's answer you can have an even better solution:

this.get('#/topups/:item', function () {
  console.log('Doing some post processing on current item');
  console.log('Now redirecting you to ' + this.params.item);
  window.location.href = 'http://example.com/menu/# + this.params.item +#/topups';
});

Again this will cause the page to reload, but if you do not mind that, then just either method.

NOTE: Sammy will also check form submission for you. This trips me up EVERY time I use it. This post has the solution.

Answer 2

I don't know much about Sammy but I can tell you from the way any router behaves, is that it catches the first match in the routing possibilities, and so, anything that ends with #/topups will be considered the same as long as it's after the hash sign.

so you better define the router this way:

this.get('#/topups/:item', function() {
    console.log('Initializing topups view for item: '+ item);
})

and then call the pages with URLs like:

<a href="/main/#/topups/item2">item 2's topups</a>

I hope this is what you're looking for