Analyzing query string in sammy.js?

Question

I'm using sammy.js , I already know how to "cut" this url into parts:

<a href="#/label/drafts">drafts</a>

via

  this.get('#/label/:name', function(context) {

              context.$element().append('<h1>' + this.params['name'] + '</h1>'); 
          });

But how can I cut this complext url ?

<a href="#/label/drafts?a=1&b=2&c=love#a">How to solve this ? </a>

Question :

How can I extract (sammy's way ):

• a 's value (expected 1)
• b 's value (expected 2)
• c 's value ( without hash) (expected love)
• c 's hash (expected a)

jsbin

n.b. Im looking for the sammy'js way ( I obviously can cut it via pure javascript , but again , I want the sammy'js way - if possible)

Answer 1

Actually, Sammy.js does support query parameters, so you would be able to use most of your current example in your URL (see my answer here for an example). What it doesn't support is # in your URL, out of necessity. It defines a query string as a ? followed by any number of non-hash characters (including none). This is due to the fact that a url like /index?param=foo#bar is a valid URL which is (according to the HTTP standard) split up like so:

• route is '/index'
• query parameter 'param' is set to 'foo'
• location.hash is set to 'bar'

If Sammy were to include a hash character within the set of valid query parameter characters, then it wouldn't be able to recognize a hash easily on valid URLs. However, if you were to URL encode the hash, you'd be able to utilize it within your route.

So, in conclusion, Sammy can get you close to what you want, but it can't get you all the way there due to how it defines query parameters.

Answer 2

Just sharing how i solved the issue for myself so that it can help others.

<a href="/#/Listing/Index/4?listtypeid=SomeId" class="list-group-item">@item.Name</a>

In Sammy

   this.get('/#/Listing/Index/:id', function (context) {
       context.app.swap('');
       context.$element().append('<h1>Here are parameters id: ' + this.params['id'] + ' and listingtypeid: ' + this.params['listtypeid'] + '</h1>');
       // OR
       //context.$element().append('<h1>Here are parameters id: ' + this.params.id + ' and listingtypeid: ' + this.params.listtypeid + '</h1>');

   });

In case some time listingtypeid could be null or not present you should first check parameter in your code.