Backbone.js and routes without hashes

Almost everyone who had to work with backbone, imagine what kind of thing this is - Router. Of course, in the application you can do without it, but the usability of the application will greatly lose.

So, the router determines which function (controller) should be used based on the URL in the browser line. Or, to be precise, on a hash. Those. you could set in the interface of your application links like:

Сделать что-то полезное

or even

Сделать что-то полезное с параметром

and everything worked perfectly. The user, in turn, could save each of these links, and, subsequently, click on them, immediately activating the desired functionality. The only negative point in all this splendor is the presence of the symbol “#” (pound sign). Not that it was bad in itself, but readability and “beauty” (someone else tells me something about RESTful from the back rows) it spoiled the URL.

Before the advent of html5 had to put up with this. With the advent of the new html, it became possible to control the browsing history of the browser (and with it the appearance of the URL in the address bar). The corresponding functionality appeared in the backbone (naturally, fallback is supported for older browsers). We’ll try to use it to make our application look fashionable and modern.

The documentation (and even StackOverflow) about this says to us simply: “Do you want routing without hashes? Do when the application starts like this: "

Backbone.history.start({pushState: true})

Of course, as soon as we added to your existing code parameter definition pushState , everything goes as expected. Those. nothing works. This is due to two problems:
  1. now the application does not know which part of the URL is the address itself, and which part is the name of the backbone controller (therefore, by default it considers everything after the domain name to be this name);
  2. if the link is specified in href with a URL without a hash, the browser will not understand what we exactly wanted there, but simply go to the specified address (which for our application means, at best, a full restart).

The first problem can be solved relatively simply. In addition to the pushState parameter, the start method has a couple more parameters. We are especially interested in root . For our example, at the beginning of the text, the launch of the router will look like this: Now you can safely write: But so far the page is still loading. Further reading of the documentation tells us that the links will now have to be made a little more complicated. For example: i.e. Now we force update the state of the application with every click. We must not forget to set the trigger parameter so that our router still gets called (and not just changed the URL in the address bar).

Backbone.history.start({pushState: true, root: "/catalog"})



Сделать что-то полезное с параметром



Сделать что-то полезное с параметром



It remains to provide the user with the ability to copy the link. To do this, we will make a simple link handler function that we will call before history.start . I have this function hanging onclick handler for all links with id = "backbone" (but I do not insist on the uniqueness of this approach):

Сделать что-то полезное с параметром

Do not forget that in href you still specify the URL, not routes (although I personally am tempted to write simply “ action1 / 42 "). Well, the function itself (using jQuery, which is not necessary at all): That's it. Enjoy the beautiful urls. As you can see, the tutorial turned out to be quite elementary, but it was the fragmentation of information on this issue that made me write it.

var fRouterLinks = function()
{
$("#barebone").click(function(){
Router.navigate($(this).attr("href"), {trigger: true, replace: true} );
return false;
});
}




Also popular now: