Skip to content

Instantly share code, notes, and snippets.

@stephenvisser
Created May 16, 2012 15:45
Show Gist options
  • Save stephenvisser/2711454 to your computer and use it in GitHub Desktop.
Save stephenvisser/2711454 to your computer and use it in GitHub Desktop.
Using Twitter Bootstrap NavBars with Backbone.js
//This is the Backbone controller that manages the content of the app
var Content = Backbone.View.extend({
initialize:function(options){
Backbone.history.on('route',function(source, path){
this.render(path);
}, this);
},
//This object defines the content for each of the routes in the application
content:{
"":_.template(document.getElementById("root").innerHTML),
"adventure":_.template(document.getElementById("adventure").innerHTML),
"contact":_.template(document.getElementById("contact").innerHTML)
},
render:function(route){
//Simply sets the content as appropriate
this.$el.html(this.content[route]);
}
});
//This is the Backbone controller that manages the Nav Bar
var NavBar = Backbone.View.extend({
initialize:function(options){
Backbone.history.on('route',function(source, path){
this.render(path);
}, this);
},
//This is a collection of possible routes and their accompanying
//user-friendly titles
titles: {
"":"Home",
"adventure":"Adventure",
"contact":"Contact"
},
events:{
'click a':function(source) {
var hrefRslt = source.target.getAttribute('href');
Backbone.history.navigate(hrefRslt, {trigger:true});
//Cancel the regular event handling so that we won't actual change URLs
//We are letting Backbone handle routing
return false;
}
},
//Each time the routes change, we refresh the navigation
//items.
render:function(route){
this.$el.empty();
var template = _.template("<li class='<%=active%>'><a href='<%=url%>'><%=visible%></a></li>");
for (var key in this.titles)
{
this.$el.append(template({url:key,visible:this.titles[key],active:route === key ? 'active' : ''}));
}
}
});
//Every time a Router is instantiated, the route is added
//to a global Backbone.history object. Thus, this is just a
//nice way of defining possible application states
new (Backbone.Router.extend({
routes: {
"": "",
"adventure": "adventure",
"contact":"contact"
}
}));
//Attach Backbone Views to existing HTML elements
new NavBar({el:document.getElementById('nav-item-container')});
new Content({el:document.getElementById('container')});
//Start the app by setting kicking off the history behaviour.
//We will get a routing event with the initial URL fragment
Backbone.history.start();
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding-top:40px;">
<!-- CONTENT TEMPLATES -->
<script type="text/html" id="root">
<div>MAIN</div>
</script>
<script type="text/html" id="adventure">
<div>ADVENTURE</div>
</script>
<script type="text/html" id="contact">
<div>CONTACTS</div>
</script>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Testing</a>
<div class="nav-collapse collapse">
<!-- NAV BAR ITEM AREA -->
<ul id="nav-item-container" class="nav"></ul>
</div>
</div>
</div>
</div>
<!-- MAIN CONTENT AREA -->
<div id="container" class="container">
</div>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src="bootstrap.min.js"></script>
<script type="text/javascript" src="underscore.min.js"></script>
<script type="text/javascript" src="backbone.min.js"></script>
<script type='text/javascript' src="app.js"></script>
</body>
</html>
@nmoadev
Copy link

nmoadev commented Feb 13, 2014

Also, why are you using

Backbone.history.on(....)

to handle routing instead of defining an application router?

@Monika24
Copy link

Please provide code for dropdown nav bar... This example contains only main menu. No submenu is provided.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment