Skip to content

Instantly share code, notes, and snippets.

@mojaray2k

mojaray2k/Backbone 1

Last active December 21, 2015 01:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mojaray2k/6225467 to your computer and use it in GitHub Desktop.
Save mojaray2k/6225467 to your computer and use it in GitHub Desktop.
Download ZIP
Creating Simple Backbone Js Routers
Raw
Backbone 1
//The name of this file is backbone-routes.js
var AppRouter = Backbone.Router.extend({
routes: {
"": "list",
"menu-items/new": "itemForm",
"menu-items/:item": "itemDetails"
},
list: function () {
$('#app').html('List screen');
},
itemDetails: function (item) {
$('#app').html('Menu item: ' + item);
},
itemForm: function () {
$('#app').html('New item form');
}
});
var app = new AppRouter();
$(function() {
Backbone.history.start();
});
Raw
routes.html
<html>
<head>
<title>
Off the backbone
</title>
<script type="text/javascript" src="js/lib/jquery-1.9.1.min.js">
</script>
<script type="text/javascript" src="js/lib/underscore-min.js">
</script>
<script type="text/javascript" src="js/lib/backbone-min.js">
</script>
<script type="text/javascript" src="js/lib/bootstrap.min.js">
</script>
<script type="text/javascript" src="js/app.js">
</script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
</head>
<body>
<div class="container">
<h1>
Off the backbone
</h1>
<ul class="nav nav-pills">
<li>
<a href="#">Food</a>
</li>
<li>
<a href="#/menu-items/new">Add Item</a>
</li>
<li>
<a href="#/menu-items/garden-salad">Garden Salad</a>
</li>
</ul>
</div>
<div class="container" id="app">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment