The Router of backbone.js

second, small trial sledgehammer (click here to download)

First, let's look at the following paths:

Http://localhost:2746/Home/Home#help

Http://localhost:2746/Home/Home#single/test1

Http://localhost:2746/Home/Home#multip/test1/test2

Some people might think it was used to locate the anchor, but in the backbone.js Route These are an event, with parameters.

Let's define a route first:

1 var custroute = Backbone.Router.extend ({2});

If a person without a JavaScript base sees this string of code as if it were just a function of execution, the actual functionality is not as simple as you might think.

The actual function is to create a new class, and this class inherits from Backbone.router. (JavaScript does not exist in the actual sense of the class, just through some techniques to achieve the effect of the class ).

Then we go down and start overriding the parent class in this class:

1     var custroute = Backbone.Router.extend ({2         initialize:function () {3             console.log ("Route Initialize"); 4         }5     });

In the above we rewrite the Initialize method in the parent class, which is called when the object is instantiated. Let's write a piece of code to instantiate it:

1     $ (function () {2         new Custroute (); 3         Backbone.history.start (); 4     });

Here we also call the Backbone.history.start method, which allows us to trigger a routed event when we click Back or forward.

At this point you can press F12 to see if the string in the console is output.

Here we begin to add the path to the route, the added route path requires overriding the routes object of the parent class, then we will implement the first routing path above:

1     var custroute = Backbone.Router.extend ({2         initialize:function () {3             console.log ("Route initialize"); 4< c3/>}, 5         routes: {6             "help": "Helpex" 7         }, 8         helpex:function () {9             console.log ("Helpex");     });

At this point we will go to this page, then add #help after it and reopen it, and then look at the console to see the output string. Of course you would think so

Too chicken, but also to enter manually, so we can now fill the page with the following HTML tag:

1 <a href= "#help" >help</a>

Then we refresh the page and click on this link. You can see that the console is also output.

Here we add parameters to the path of the route so that the triggered function can receive the data from the path. We continue to add the corresponding route:

1     var custroute = Backbone.Router.extend ({2         initialize:function () {3             console.log ("Route initialize"); 4< c3/>}, 5         routes: {6             "": "Index", 7             "Help": "Help", 8             "Single/:single": "Fsingle", 9             "multip/: Single/:multip ":" Fmultip "         },11         index:function () {             console.log (" index "),         },14         Help : function () {             console.log ("Help"),         },17         fsingle:function (single) {             Console.log : "+ single",         },20         fmultip:function (single, multip) {             console.log ("Multip:" + Single + ":" + Multip); (         }23     });

We then add the following link to the page:

1 <div>2     <a href= "#help" >help</a>3     <a href= "#single/test1" >single</a>4     <a href= "#single/test2" >single2</a>5     <a href= "#multip/test1/test2" >multip</a>6     <a href= "#multip/test2/test3" >multip2</a>7 </div>

Then we click on these links, we can see that the console correctly output the data in the routing path, here is to pay special attention to the parameters in the routing path to: Start

Then follow the name of this parameter and the name of the parameter in response to the routed event will be the same as the one in the route or you will find that you clicked the link at the root

No response, no error.

Hint: If you want to use JS code to jump to this route you can use the object name. Navigate method can be used.

So far we have simply learned the routing path, and I will continue to explain the rest.

The Router of backbone.js