Router
Web page generally contain linkable, bookmarkable, shareable URLs for important locations.Router methods work for routing client-side pages and connecting them to actions and events.Backbone.Router also enabled history capabilities.You need to call Backbone.history.start() or
Backbone.history.start({pushState: true}) after the application has
finished creating router.
The following is the lists of methods which can be used for Router.
extend : It is used to extend the backbone router class.It helps to
create a custom router class.Backbone.Router actually create a new constructor that inherits from the Backbone.Router.
Syntax : Backbone.Router.extend(properties, [classProperties])
Example
<script
type="text/javascript">
var
Router = Backbone.Router.extend({
routes:
{
//Your
custom logig
},
execute:
function
(callback, args)
{
//Your
custom logig
}
});
Backbone.history.start();
</script>
routes : Routes method define URL representation of application objects on routers.
Syntax : router.routes
constructor / initialize :It creates a new constructor for the router object instantiation. Syntex : new Router([options])
Example
<script
type="text/javascript">
//Rounter
extend
var
Router = Backbone.Router.extend({
routes:
{
//Your
custom logig
},
execute:
function
(callback, args)
{
//Your
custom logig
}
});
//instance
creation
var
appRouter=new
Router();
Backbone.history.start();
</script>
route :create a route for the router.Syntax : router.route(route, name, [callback])
Example of extend/constructor/routes
<!DOCTYPE
html>
<head>
<title>Router
Extend Example</title>
<script
src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>
<script
type="text/javascript">
var
Router = Backbone.Router.extend({
routes:
{
'':
'Router1',
'Router2':
'Router2'
},
Router1:
function(){
document.write("Your
Custom logic no 1 called.");
},
Router2:
function(){
document.write("Your
Custom logic no 2 called.");
},
});
var
appRouter=new
Router();
Backbone.history.start();
</script>
</head>
<body>
Output :
Your Custom logic no 1 called.
navigate :If we want to save our application as a URL, we call navigate to update.
Syntax : router.navigate(fragment, [options])
Example
<!DOCTYPE
html>
<head>
<title>Router
Extend Example</title>
<script
src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>
<script
type="text/javascript">
var
App = Backbone.Router.extend({
routes:
{
"":
"index",
"item":
"GoSearch"
},
index:
function
() {
document.write('You
are in the home page.');
},
GoSearch:
function
() {
app.navigate("www.google.com",
{ trigger: true
});
}
});
app
= new
App();
Backbone.history.start();
</script>
</head>
Output :
You are in the home page.
execute :router.execute is called internally within the router, its corresponding callback is executed whenever a route is matched.
Syntax : router.execute(callback, args)Example
<!DOCTYPE
html>
<head>
<title>Router
Extend Example</title>
<script
src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>
<script
type="text/javascript">
var
Route1 = Backbone.View.extend({
template:
'This
is route 1',
initialize:
function
() {
this.execute();
},
execute:
function
() {
return
this.template;
}
});
var
App = Backbone.Router.extend({
routes:
{
"":
"index",
"item":
"GoSearch"
},
index:
function
() {
document.write('You
are in the home page.');
},
GoSearch:
function
() {
app.navigate("www.google.com",
{ trigger: true
});
var
route1 = new
Route1();
alert(route1.execute());
}
});
app
= new
App();
Backbone.history.start();
</script>
<div
id
=
"navigation">
<a
href
=
"#item">route1</a>
</div>
<div
id
=
"content></div>
</head>
Output :
