Backbone.js Routing

by Daniel Clasen

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
Backbone.js Routing
<div>
    <a href="#/home">Home</a>
    <a href="#/blog">Blog</a> 
</div>    
<div id="content">
</div>

JavaScript

var HomeView = Backbone.View.extend({
      template: '<h1>Home</h1>',
      initialize: function () {
          this.render();
      },
      render: function () {
          this.$el.html(this.template);
      }
  });
  

var BlogView = Backbone.View.extend({
      template: '<h1>Blog</h1>',
      initialize: function () {
          this.render();
      },
      render: function () {
          this.$el.html(this.template);
      }
  });
  
  var AppRouter = Backbone.Router.extend({
      routes: {          
          '': 'homeRoute',
          'home': 'homeRoute',
          'blog': 'blogRoute',          
      },
      homeRoute: function () {
          var homeView = new HomeView();          
          $("#content").html(homeView.el);
      },
      blogRoute: function () {
          var blogView = new BlogView();          
          $("#content").html(blogView.el);
      }
  });

  var appRouter = new AppRouter();
  Backbone.history.start();