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