Ryan Ricard

www topics worth sharing.

Backbone.js Routes Example

Lately I have been working to become more familiar with Backbone.js (if you’re not sure what I’m talking about? go here: http://backbonejs.org/) Backbone is a JavaScript MVC framework that is very useful in building single page bookmarkable state-aware JavaScript applications. Below you will find an example of how easy it is to leverage Backbone ‘Routes’ to achieve a state-aware application.

In this snippet you will find we are using jQuery’s ready to load an ApplicationRouter and ApplicationView. ApplicationRouter extends Backbone.Router which is the source of the state-aware magic. In ApplicationRouter we set the routes and map them to contained methods to execute–pretty simple stuff. Under ApplicationRouter you will find ApplicationView, ApplicationView is basically used to load ApplicationRouter, observe navigation click events, and to tell ApplicationRouter to change routes.

Backbone ApplicationRouter and ApplicationView 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

   $(function(){

      var ApplicationRouter = Backbone.Router.extend({

          //map url routes to contained methods
          routes: {
              "": "home",
              "home": "home",
              "about": "about",
              "contact": "contact"
          },

          deselectPills: function(){
              //deselect all navigation pills
              $('ul.pills li').removeClass('active');
          },

          selectPill: function(pill){
              //deselect all navigation pills
              this.deselectPills();
              //select passed navigation pill by selector
              $(pill).addClass('active');
          },

          hidePages: function(){
              //hide all pages with 'pages' class
              $('div.pages').hide();
          },

          showPage: function(page){
              //hide all pages
              this.hidePages();
              //show passed page by selector
              $(page).show();
          },

          home: function() {
              this.showPage('div#home-page');
              this.selectPill('li.home-pill');
          },

          about: function() {
              this.showPage('div#about-page');
              this.selectPill('li.about-pill');
          },

          contact: function() {
              this.showPage('div#contact-page');
              this.selectPill('li.contact-pill');
          }

      });

      var ApplicationView = Backbone.View.extend({

          //bind view to body element (all views should be bound to DOM elements)
          el: $('body'),

          //observe navigation click events and map to contained methods
          events: {
              'click ul.pills li.home-pill a': 'displayHome',
              'click ul.pills li.about-pill a': 'displayAbout',
              'click ul.pills li.contact-pill a': 'displayContact'
          },

          //called on instantiation
          initialize: function(){
              //set dependency on ApplicationRouter
              this.router = new ApplicationRouter();

              //call to begin monitoring uri and route changes
              Backbone.history.start();
          },

          displayHome: function(){
              //update url and pass true to execute route method
              this.router.navigate("home", true);
          },

          displayAbout: function(){
              //update url and pass true to execute route method
              this.router.navigate("about", true);
          },

          displayContact: function(){
              //update url and pass true to execute route method
              this.router.navigate("contact", true);
          }

      });

      //load application
      new ApplicationView();

  });

As for the HTML… nothing out of the ordinary. Each div represents a page of our single page app.

HTML 
1
2
3
4
5
6
7
8
9

 <ul class="pills">
      <li class="home-pill"><a>Home</a></li>
      <li class="about-pill"><a>About</a></li>
      <li class="contact-pill"><a>Contact</a></li>
  </ul>

  <div id="home-page" class="pages">Hi I'm the home page!</div>
  <div id="about-page" class="pages">Hi I'm the about page!</div>
  <div id="contact-page" class="pages">Hi I'm the contact page!</div>

The source for this example is available at: https://github.com/ryanricard/backbone-routes-example download it, run it, and let me know what you think.

Comments