A good example needs to be complete, show a generic implementation that will be often used verbatim and can be easily extended and that will highlight concerns. The following example shows how to implement a Backbone.js Router to access different pages while using a single HTML page and highlights when the page variables will be reset.
Here's some code that you can copy-and-paste into a file named router.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Backbone.js Router Example</title>
<meta name="description" content="">
</head>
<body>
<div id="page">
Welcome to Backbone.js routers!
</div>
<input type="button" value="About"
onclick="pageRouter.navigate('about', {trigger: true});"></input>
<input type="button" value="Page 1"
onclick="pageRouter.navigate('page/1', {trigger: true});"></input>
<input type="button" value="Page 2"
onclick="pageRouter.navigate('page/2', {trigger: true});"></input>
<input type="button" value="Page 3"
onclick="pageRouter.navigate('page/3', {trigger: true});"></input>
<script src="jquery-1.10.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script language="JavaScript">
var visited = 1;
var PageRouter = Backbone.Router.extend({
routes: {
'about': 'routeToAbout',
'page/:num': 'routeToPage'
},
// one way to define a route handler
routeToAbout: function() {
$('#page').html('About, visited '+visited+' pages');
++visited;
}
});
// create a router instance
var pageRouter = new PageRouter();
// a second way to define a route handler
pageRouter.on('route:routeToPage', function(num) {
$('#page').html('Page '+num+', visited '+visited+' pages');
++visited;
});
Backbone.history.start();
</script>
</body>
</html>
Assuming that you have the Backbone.js infrastructure (i.e. jquery-1.10.1.js, underscore.js and backbone.js), you can load this into any popular browser without a web server. For example, if you are using Windows and place your files in the C:\ folder, you can type the following directly into the location bar:
file:///C:/router.html
If you want to visit one of the routes, you can press the "About", "Page 1", "Page 2" or "Page 3" buttons on the web page. Or, you can directly visit the routes by copy-and-pasting the following URLs into the location bar:
file:///C:/router.html#about
file:///C:/router.html#page/1
file:///C:/router.html#page/2
file:///C:/router.html#page/3
Notice how the global variable, visited, is maintained (usually) or reset (when the page is reloaded). It is critical that your design take into account the circumstances under which page variables are reset.
Some other examples neglect to include a call to Backbone.history.start() and, without it, the page does nothing. A confusing oversight!
Hopefully, this example lets you learn about Backbone.js Routers in a straightforward way without pausing to manipulate a web server.
great
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete