Backbone.js and routes without hashes

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

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

<a href="http://myapp.com/catalog/#action1"> - </a>

or even
')
<a href="http://myapp.com/catalog/#action1/42"> - </a>

and everything worked fine. The user, in turn, could save each of these links, and, in a consequence, follow them, immediately activating the necessary functionality. The only negative point in all this magnificence - the presence of the symbol "#" (grid). Not that it was bad in itself, but readability and “prettiness” (from the back rows someone else tells me something about RESTful) she spoiled the URL.

Before coming html5 had to put up with it. With the advent of the new html, it became possible to manage the browser's transition history (and with it the appearance of the URL in the address bar). Corresponding functionality appeared in the backbone (of course, fallback for older browsers is supported). Let's try to use it to make our application look fashionable and modern.

Documentation (and even StackOverflow) on this occasion tells us simply: “Do you want routing without hashes? Do at the start of the application like this: "

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

Of course, as soon as we add the definition of the pushState parameter to our existing code, everything goes as expected. Those. nothing works. This happens because of 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 with this name);
2. if the link has a URL without a hash in the href, the browser will not understand what we really 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. The start method has, in addition to the pushState parameter, 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:

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

Now you can safely write:

<a href="http://myapp.com/catalog/action1/42"> - </a>

But while the page is still overloaded. Further reading of the documentation tells us that links will now have to be made a little more complicated. For example:

<a onclick="Router.navigate("http://myapp.com/catalog/action1/42", {trigger: true} )" href="javascript:"> - </a>

Those. now we force update the state of the application with each click. We must not forget to set the trigger parameter so that our router still volunteered (and not just changed the URL in the address bar).

It remains to give the user the opportunity to copy the link. To do this, we will make a simple link handler function, which we will call before history.start . I have this function hung up onclick handler for all links with id = “backbone” (but I do not insist on the uniqueness of this approach):

<a id="barebone" href="/catalog/action1/42"> - </a>

Do not forget that the URL is indicated in the href , not the routes (although I am personally tempted to write just “action1 / 42”). Well, the function itself (using jQuery, which is not at all necessary):

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

Everything. Enjoy beautiful URLs.

As you can see, the tutorial turned out to be quite elementary, but it was precisely the fragmentation of information on this issue that made me write it.