Created
May 16, 2012 15:45
-
-
Save stephenvisser/2711454 to your computer and use it in GitHub Desktop.
Using Twitter Bootstrap NavBars with Backbone.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Also, why are you using
Backbone.history.on(....)
to handle routing instead of defining an application router?
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
I'm curious how you would incorporate sub-views into this pattern. For example, if the content on Main was being rendered by a MainView object. Would you simply instantiate view objects as elements of Content and then ... well I'm not sure.