Backbone.js Series Tutorials Seven: Backbone.router

Backbone.router () overview

A backbone route is a JavaScript string, similar to the URL path name in traditional knowledge. This string-like pathname is the property name (or reference-named function) of a function that is invoked when a URL in the browser matches a string. For example, the URL in the following example contains the pathname "help", which, in a separate backbone application page, calls a function that associates a route named ' Help. ' Backbone

http://www.hostname.com/#help

Note that the pathname "help" is not actually a path name, but a hash. Backbone uses a hash path by default because it is now considered the most widely supported solution for creating unique URL strings without causing the browser to reload. You no longer need to support IE9 or the following version to allow backbone to use the latest HTML5 history.pushstate, which eliminates the need to use a hash path. The History.pushstate API updates the browser and allows you to modify the path name of the URL without causing the browser to reload. I'll discuss this in more detail later in this section. Now, let's look at a backbone route instance. In the following code, I created the default backbone.router () instance and then used the route () method to define a "help" route.

 
  
  
 
   
   
//Show page load time URL appearance 
 
   
   
$ ("#urlPL span"). Text (window.location.href); 
  
   
   
  
  
   
   
//create a backbone Router 
  
   
   
var myrouter = new Backbone.router (); 
  
   
   
  
  
   
   
//let backbone start listening for changes on the URL 
  
   
   
backbone.history.start (); 
  
   
   
  
  
   
   
//uses the routing method to create a help route, route (route, name, Callback-function) 
 
   
   
myrouter.route (' help ', ' Help ', function () {
 
   
   
 Console.log ("The URL hash just change to /#help "); 
  
   
   
 
   
   
  
  
   
   
//to change the URL hash to "#help" 
  
   
   
window.location.hash = "help"; 
  
   
   
  
  
   
   
//show the appearance of the URL after the hash code, note the #help 
 
   
   
$ ("#url span"). Text (window.location.href); 
 
  
  
 
In the preceding code example, when the hash changes to #help,backbone can receive the change and all the content behind the # and match it to a predefined string name (that is, "help"), and is associated with a callback function.
 
A route is a basic pathname of a URL string, which is monitored by a backbone string match, and a corresponding function is invoked after the match succeeds.
 
Tips:
 

 

 
  
 
   
Routing is used by default on a URL in the Hashchange event and in the hash section. If backbone is configured to use History.pushstate () and the Popstate event and the normal pathname are available, they are used, and if they are not available, the hash is returned by default. If the backbone detection result is that none of these events is available, a polling (polling) URL will be taken to monitor whether it has been altered.
 
  

 
 
Using Backbone.history.start () to start routing management
 
In order for backbone to start managing URL changes (including calling default routes, listening to routing, managing browser history, and processing return buttons), you need to invoke Backbone.history.start (). A detailed description of this method can be found in the Backbone.history section. Now, just know that backbone has to manually tell the browser to start the routing process. In the following code, I created a "help" route, but backbone hasn't started listening to URL changes until Backbone.history.start () is invoked.
 
 
  
   

  
   
    
Create a backbone Router
  
   
    
var myrouter = new Backbone.router ();
  
   
    

  
   
    
Create a help route using the routing method, route (route, name, Callback-function)
  
   
    
Myrouter.route (' Help ', ' Help ', function () {
  
   
    
Console.log ("The URL hash just change to/#help");
  
   
    
});
  
   
    

  
   
    
Change the URL hash to "#help", but backbone does not change
  
   
    
Window.location.hash = "Help";
  
   
    

  
   
    
Let backbone start listening for changes on the URL
  
   
    
Backbone.history.start ();
  
   
    

  
   
    
Change the URL hash to "#help", and now the route is ready to work!
  
   
    
Window.location.hash = "Help";
 
  
   
 
Backbone initial route
 
The initial route is run when the Backbone.history.start () is invoked. Defining an initialization route is to send an empty string route name to this route, indicating that the route was run by default at the start of the route. In the following code, I define an initialization route that is invoked when Backbone.history.start () is invoked.
 
 
  
    

  
   
     
Create a backbone Router
  
   
     
var myrouter = new Backbone.router ();
  
   
     

  
   
     
Create an initial route
  
   
     
Myrouter.route ("", "Initialroute", function () {
  
   
     
Console.log ("The intital route has been invoked");
  
   
     
});
  
   
     

  
   
     
Let backbone start listening for changes on the URL, run the initial route
  
   
     
Backbone.history.start ();
  
   
     

  
   
     
Show URL Appearance:
  
   
     
$ ("#url span"). Text (window.location.href);
 
  
    
 
Tips:
 

   

 
    
 
     
Starts the route without invoking the initialization path, passing the {silence:true} to the. Start () method.
 
    

   
 
Defining routes
 
This step demonstrates the use of the route () method to define a route after the Backbone.router () instance is instantiated. In simple terms, defining a route is done not just through the route () method, but also through the following four methods (including the route () method):
 
1: When you inherit backbone.router with the routes option
 
 
  
     

  
   
      
Inherit Backbone.router ()
  
   
      
var extendedrouter = Backbone.Router.extend ({
  
   
      
Routes: {
  
   
      
' Help ': ' Help '
  
   
      
},
  
   
      
Help:function () {
  
   
      
Console.log ("The URL hash just change to/#help");
  
   
      
}
  
   
      
});
  
   
      

  
   
      
Create a backbone Router
  
   
      
var myrouter = new Extendedrouter ();
  
   
      

  
   
      
Let backbone start listening for changes on the URL
  
   
      
Backbone.history.start ();
  
   
      

  
   
      
Change the URL hash to "#help"
  
   
      
Window.location.hash = "Help";
 
  
     
 
2: When instantiating a route with the routes option:
 
 
  
      

  
   
       
Create a backbone Router
  
   
       
var myrouter = new Backbone.router ({
  
   
       
Routes: {
  
   
       
"Help": function () {
  
   
       
Console.log ("The URL hash just change to/#help");
  
   
       
}
  
   
       
}
  
   
       
});
  
   
       

  
   
       
Let backbone start listening for changes on the URL
  
   
       
Backbone.history.start ();
  
   
       

  
   
       
Change the URL hash to "#help"
  
   
       
Window.location.hash = "Help";
 
  
      
 
3: After you create an instance using the route () method:
 
 
  
       

  
   
        
Create a backbone Router
  
   
        
var myrouter = new Backbone.router ();
  
   
        

  
   
        
Let backbone start listening for changes on the URL
  
   
        
Backbone.history.start ();
  
   
        

  
   
        
Create a help route using the route method, route (route, name, Callback-function)
  
   
        
Myrouter.route (' Help ', ' Help ', function () {
  
   
        
Console.log ("The URL hash just change to/#help");
  
   
        
});
  
   
        

  
   
        
Change the URL hash to "#help"
  
   
        
Window.location.hash = "Help";
 
  
       
 
4: During initialization of an instance with the route () method:
 
 
  
        

  
   
         
var extendedrouter = Backbone.Router.extend ({
  
   
         
Initialize:function () {
  
   
         
This.route ("Help", "help"); Seek this.help (ie Myrouter[help])
  
   
         
},
  
   
         
Help:function () {//will become an instance property
  
   
         
Console.log ("The URL hash just change to/#help");
  
   
         
}
  
   
         
});
  
   
         

  
   
         
Create a backbone Router
  
   
         
var myrouter = new Extendedrouter ();
  
   
         

  
   
         
Let backbone start listening for changes on the URL
  
   
         
Backbone.history.start ();
  
   
         

  
   
         
Change the URL hash to "#help"
  
   
         
Window.location.hash = "Help";
 
  
        
 
The above code you can run it yourself.
 
Run a route with a wildcard pathname (also called splats or *)
 
A wildcard path name can be used in any pathname to run the path. For example, once a URL changes, routing "*anyurl" will be run.
 
 
  
         

  
   
          
var myrouter = new Backbone.router ();
  
   
          

  
   
          
Backbone.history.start ();
  
   
          

  
   
          
Myrouter.route ("*anyurl", "Anyurl", function () {
  
   
          
Console.log ("called Anytime the URL changes to any URL path");
  
   
          
});
  
   
          

  
   
          
Change the URL hash to "#foo"
  
   
          
Window.location.hash = "Foo";
  
   
          
Change the URL hash to "#foo/boo/bar?coo=too&noo=loo"
  
   
          
settimeout (function () {Window.location.hash = "QA";},2000);
 
  
         
 
Once the URL is changed to "Help/anything/anything", the route "/help/*" runs.
 
 
  
          

  
   
           
var myrouter = new Backbone.router ();
  
   
           

  
   
           
Backbone.history.start ();
  
   
           

  
   
           
Myrouter.route ("Help/*anyurl", "Anyurl", function () {
  
   
           
Console.log ("called Anytime the URL changes to any URL path");
  
   
           
});
  
   
           

  
   
           
Change the URL hash to "#foo"
  
   
           
Window.location.hash = "Help/foo";
  
   
           
Change the URL hash to "#/help/foo/boo/bar?coo=too&noo=loo"
  
   
           
settimeout (function () {Window.location.hash = "Help/foo/boo/bar?coo=too&noo=loo";},2000);
 
  
          
 
Tips:
 

         

 
          
 
           
Passing a single splat route (that is, "*") can cause backbone to throw an error
 
          

         
 
Passing parameters from a URL to a routing callback function
 
In order to define the URL part, you should place a ': ' before the parameter name in the route string. For example, in the following code, I passed 4 parameters to the search routing callback function.
 
 
  
           

  
   
            
var myrouter = new Backbone.router ();
  
   
            

  
   
            
Backbone.history.start ();
  
   
            

  
   
            
Myrouter.route ("Search/:query/:filter1-:filter2/page:page", "Search", function (query, Filter1, Filter2, page) {
  
   
            
Console.log (query, Filter1, Filter2, page);
  
   
            
});
  
   
            

  
   
            
Change URL hash to #search/foo/today-newest/page1
  
   
            
Window.location.hash = "Search/foo/today-newest/page1";
 
  
           
 
Tips:
 

          

 
           
 
            
If you enclose the URL parameter in ' () ', it becomes an optional argument. If there is no ' () ', then the URL will only run all parameters that are defined in the route string.
 
           

          
 
Common way to match a URL to route ()
 
The route () method optionally receives a regular expression value as the first argument and does not accept a string value. This will be a better way to help you adjust the matching URL. In the following code, I show how to match a particular character to a route.
 
 
  
            

  
   
             
var myrouter = new Backbone.router ();
  
   
             

  
   
             
Backbone.history.start ();
  
   
             

  
   
             
Myrouter.route (/(HELPSUPPORTANSWERSQA)/, "Help", function () {
  
   
             
Console.log ("The URL hash just change to/#help");
  
   
             
});
  
   
             

  
   
             
Change the URL hash to "#help"
  
   
             
Window.location.hash = "Help";
  
   
             
Change the URL hash to "#qa" settimeout (function () {window.location.hash = QA;},2000);
  
   
             
Change the URL to "#support" settimeout (function () {Window.location.hash = "support";},4000);
 
  
            
 
Route broadcast a "Route:callback-name" embedded event
 
When a route matches a namespace, and the callback function calls a "route" embedded event, it means that the called callback function name has been broadcast by backbone. The On () or Listento () event method can be used to embed the "Route:nameofcallbackfunction" event.
 
 In the following code, when the search callback function is called, I take advantage of the On () and Listento () listener and invoke the additional callback function. 
 
 
  
             
 
   
              
var myRouter = New Backbone.router (); 
  
   
              
  
  
   
              
backbone.history.start (); 
  
   
              
  
 
   
              
myrouter.route ("Search/:query", "Search", function (query) {
 
   
              
 Console.log (query+) 0 "); 
  
   
              
 
   
              
  
  
   
              
//on () 
  
   
              
myrouter.on ("Route:search", function (query) {
 
   
              
 Console.log (query+ "1"); 
  
   
              
 
   
              
//listento () 
 
   
              
backbone.listento (Myrouter, "Route:search", function (query) {
 
   
              
 
   
              
 
   
              
  
  
   
              
//to change the URL hash to #search/foo/today-newest/page1 
 
   
              
window.location.hash = "Search/foo"; 
 
  
             
 
Note that on () and Listento () can pass any URL parameters.
 
Tips:
 

            

 
             
 
              
When a route matches, there is also an "route" event assigned to the "Route:callback-name" event that is embedded in the routing object.
 
             

            
 
Using navigate () to navigate the path manually
 
I called the route in the previous code example by changing the Window.location.hash value of the backbone listening in the browser. Using the Navigate () method, we can achieve the same goal. In the following code, I call the Navigate () method to pass a route string to the navigation instead of updating the hash value in the browser.
 
 
  
              

  
   
               
var myrouter = new Backbone.router ();
  
   
               

  
   
               
Backbone.history.start ();
  
   
               

  
   
               
Myrouter.route ("test/:p Aram", "Test", function (param) {
  
   
               
Console.log (param);
  
   
               
});
  
   
               

  
   
               
Use navigate () to pass the URL and then run to get the log "foo"
  
   
               
Myrouter.navigate ("Test/foo", {
  
   
               
Trigger:true
  
   
               
});
 
  
              
 
Tips:
 

             

 
              
 
               
By default, navigate () updates the URL in the browser (processing history and Back buttons) without invoking the routing callback function. You must pass the Trigger:true option to navigate () in order to update the URL in the browser and invoke the callback function that the link attaches to the route.
 
               
By default, navigate () assumes that you want to change the URL and update the browser history. If you do not want to update the browser history (press the Back button), you can pass the Replace:true option to navigate (). This will simply replace the current URL without updating the browser history.