Skip to content

Instantly share code, notes, and snippets.

@evanp

evanp/gist:1566760

Created January 5, 2012 19:21
Show Gist options
  • Save evanp/1566760 to your computer and use it in GitHub Desktop.
Save evanp/1566760 to your computer and use it in GitHub Desktop.
Download ZIP
Backbone router with pushState
Raw
gistfile1.html
<html>
<head>
<title>test router</title>
<style>
#content { color: red; font-size: 32px }
</style>
</head>
<body>
<ul>
<li><a href="/">root</a></li>
<li><a href="/one">one</a></li>
<li><a href="/two">two</a></li>
<li><a href="/three">three</a></li>
</ul>
<div id="content">
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
<script type="text/javascript">
var App = Backbone.Router.extend({
routes: {
"/": "sayOK",
"/one": "sayOne",
"/two": "sayTwo",
"/three": "sayThree",
},
setContent: function(str) {
$("#content").html(str);
},
sayOK: function() {
this.setContent("OK");
},
sayOne: function() {
this.setContent("one");
},
sayTwo: function() {
this.setContent("two");
},
sayThree: function() {
this.setContent("three");
},
});
var the_app = new App();
_.bindAll(the_app);
$("a").click(function(ev) {
var href = $(this).attr("href");
res = the_app.navigate(href, true);
return false;
});
Backbone.history.start({pushState: true});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment