JavaScript learning 5: Router instances in backbone

I am still confused about the use of this router. Each click of such a link action will trigger an event, but the url will also change. In this case, it will not automatically trigger the event. Or this is only used on a single page website, or on a mobile device website... SyntaxHighlighter. all ();

I am still confused about the use of this router. Each click of such a link action will trigger an event, but the url will also change. In this case, it will not automatically trigger the event. Or this is only used on a single page website, or on a mobile device website, or I still don't use it.

Give a rough explanation of the Router:
The router in Backbone, known as router, has the meaning of routing. Obviously, the url must be controlled here.

Backbone. Router will regard the # tag in your connection as the url path

Even if I am confused, I still need to write a few examples to test it. After all, practice can solve the problem.

1. A simple example

Var AppRouter = Backbone. Router. extend ({

Routes :{

"* Actions": "defaultRoute"

},

DefaultRoute: function (actions ){

Alert (actions );

}

});

Var app_router = new AppRouter;

Backbone. history. start ();
You need to call the Backbone. history. start () method to initialize This Router.

The use of this Router is like the functions provided by django's urlconf file, if you know django.

The a tag testActions is required on the page.

2. How do I transmit parameters for this routes ing?

Let's take a look at the following example.

Var AppRouter = Backbone. Router. extend ({

Routes :{

"/Posts/: id": "getPost ",

"* Actions": "defaultRoute"

},

GetPost: function (id ){

Alert (id );

},

DefaultRoute: function (actions ){

Alert (actions );

}

});

Var app_router = new AppRouter;

Backbone. history. start ();
The corresponding page should have a hyperlink: Post 120

You can see the matching method of # content after the tag from the above. There are two methods: one is to use ":" to take the corresponding position after # as the parameter; another type is "*", which can match all URLs. Next, let's drill down.

[Javascript] var AppRouter = Backbone. Router. extend ({
 
Routes :{
 
"/Posts/: id": "getPost ",
 
"/Download/* path": "downloadFile", // the corresponding link is download gif
 
"/: Route/: action": "loadView", // the corresponding link is Load Route/Action View.
 
"* Actions": "defaultRoute"
 
},
 
GetPost: function (id ){
 
Alert (id );
 
},
 
DefaultRoute: function (actions ){
 
Alert (actions );
 
},
 
DownloadFile: function (path ){
 
Alert (path); // user/images/hey.gif
 
},
 
LoadView: function (route, action ){
 
Alert (route + "_" + action); // dashboard_graph
 
}
 
});
 
Var app_router = new AppRouter;
 
Backbone. history. start ();
Var AppRouter = Backbone. Router. extend ({

Routes :{

"/Posts/: id": "getPost ",

"/Download/* path": "downloadFile", // the corresponding link is download gif

"/: Route/: action": "loadView", // the corresponding link is Load Route/Action View.

"* Actions": "defaultRoute"

},

GetPost: function (id ){

Alert (id );

},

DefaultRoute: function (actions ){

Alert (actions );

},

DownloadFile: function (path ){

Alert (path); // user/images/hey.gif

},

LoadView: function (route, action ){

Alert (route + "_" + action); // dashboard_graph

}

});

Var app_router = new AppRouter;

Backbone. history. start ();

In summary, the use of the router seems to be able to remove the hassle of triggering events by binding dom nodes, but the only thing that makes me feel uncomfortable is that if I click it and refresh it again, the corresponding method will be re-executed because the url has changed. Maybe this problem can be solved, but I haven't found it yet.

In addition, in other modules (model, view, collection), you can use routes :{} to trigger functions based on links.

The complete code is provided below, and comments are themselves removed from the experiment:

[Javascript] 
 
 
The5fire-backbone-router 
 
 
Post 1, 120
Download gif
Load Route/Action View
 
 


Script
(Function ($ ){
// The router in Backbone, known as router, indicates a route. Obviously, the url must be controlled here.
// Backbone. Router will regard the # tag in your connection as the url path
/**
// 1. Let's look at a simple example.
Var AppRouter = Backbone. Router. extend ({
Routes :{
"* Actions": "defaultRoute"
},
DefaultRoute: function (actions ){
Alert (actions );
}
});

Var app_router = new AppRouter;

Backbone. history. start ();


// 2. Since the url is matched, it should not only be a simple static match, but should have the function of passing parameters, so the following is a dynamic router example.
Var AppRouter = Backbone. Router. extend ({
Routes :{
"/Posts/: id": "getPost ",
"* Actions": "defaultRoute"
},
GetPost: function (id ){
Alert (id );
},
DefaultRoute: function (actions ){
Alert (actions );
}
});

Var app_router = new AppRouter;

Backbone. history. start ();
**/
// You can see the matching # method of the content after the tag from the above. There are two methods: one is to use ":" to take the corresponding position after # as the parameter; another type is "*", which can match all URLs. Next, let's drill down.
Var AppRouter = Backbone. Router. extend ({
Routes :{
"/Posts/: id": "getPost ",
"/Download/* path": "downloadFile", // the corresponding link is download gif
"/: Route/: action": "loadView", // the corresponding link is Load Route/Action View.
"* Actions": "defaultRoute"
},
GetPost: function (id ){
Alert (id );
},
DefaultRoute: function (actions ){
Alert (actions );
},
DownloadFile: function (path ){
Alert (path); // user/images/hey.gif
},
LoadView: function (route, action ){
Alert (route + "_" + action); // dashboard_graph
}
});

Var app_router = new AppRouter;

Backbone. history. start ();

}) (JQuery );
Script

 

 

From the_fire's technical blog