The Backbone.JS Router Extend() method extends the backbone’s router class. It also creates a new constructor and defines some triggered actions.
Syntax:
Backbone.Router.extend (properties, classProperties)
Parameters:
properties: This parameter is used to specify the properties for instance for the router class.
classProperties: This parameter is used to specify the class properties for the constructor function of the router.
Example:
<title>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 routeList = Backbone.View.extend({
el: '#routelist',
events: {
'click a' : 'onClick'
},
onClick: function( e ) {
router.navigate('/');
} });
var X = Backbone.Router.extend({
routes: {
'route/:id' : 'defaultRoute'
}, });
var routelist = new routeList();
Backbone.history.start();
</script>
<section id="routelist">
<ul>
<li> <a href="#/route1">Route 1 </a> </li>
<li> <a href="#/route2">Route 2 </a> </li>
<li> <a href="#/route3">Route 3 </a> </li>
<li> <a href="#/route4">Route 4 </a> </li>
<li> <a href="#/route5">Route 5 </a> </li>
</ul>
</section>
<title>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 routeList = Backbone.View.extend({
el: '#routelist',
events: {
'click a' : 'onClick'
},
onClick: function( e ) {
router.navigate('/');
} });
var X = Backbone.Router.extend({
routes: {
'route/:id' : 'defaultRoute'
}, });
var routelist = new routeList();
Backbone.history.start();
</script>
<section id="routelist">
<ul>
<li> <a href="#/route1">Route 1 </a> </li>
<li> <a href="#/route2">Route 2 </a> </li>
<li> <a href="#/route3">Route 3 </a> </li>
<li> <a href="#/route4">Route 4 </a> </li>
<li> <a href="#/route5">Route 5 </a> </li>
</ul>
</section>
Example
Output:
● Route 1
● Route 2
● Route 3
● Route 4
● Route 5
● Route 1
● Route 2
● Route 3
● Route 4
● Route 5
● Route 1 ● Route 2 ● Route 3 ● Route 4 ● Route 5
Explanation:
In the above example the Extend() method is used to extend the backbone’s router class.