backbone.jsのRouterを触ってみる

javascript

backbone.jsのRouterについて調べつつ、サンプルを書いて見ました。
http://dl.dropbox.com/u/494487/backbone-sample/routing/index.html

タブをクリックすると、Backbone.Routeのroutesで、URLパターンに対して指定したfunctionが呼ばれ、コンテンツが切り替わるだけのサンプルです。
コンテンツはjQueryで表示を変えてるだけですが、本来はそこでBackbone.Viewを使って表示をするんだと思います。

構成

├── index.html
├── css
│   ├── base.css
│   └── bootstrap.css
└── js
    ├── app.js
    ├── setup.js
    ├── backbone.js
    ├── jquery-1.7.1.js
    └── underscore.js

app.jsでwindow.App内にViewやRouterを定義し、setup.jsでそれらのインスタンスを作成し、
Backbone.history.start()でURL履歴管理を始めてます。

setup.js

$(function(){
    // Initialize Backbone views.
    App.navView = new App.NavView;
    // Initialize the Backbone router.
    App.router = new App.Router;

    Backbone.history.start();
});

app.js

window.App = {
    NavView: Backbone.View.extend({
	el: $('#global-nav'),

	events: {
	    "click #global-nav li a": "nav"
	},
	
	nav: function(e){
	    this.el.children().each(function() { 
		$(this).removeClass('active');
	    });
	    $(e.target).parent().addClass('active');
	}
    }),

    Router: Backbone.Router.extend({
	routes: {
	    "":                   "home",
	    "home":               "home",
	    "popular":            "popular", 
	    "recent":             "recent",
	    "about":              "about"
	},

	initialize: function(){
	    this.page_header = $('#page-header');
	    this.page_header.append("<h1>home</h1>");
	},
	home: function() {
 	    this.page_header.empty();
	    this.page_header.append("<h1>home</h1>");
	},
	popular: function(){
	    this.page_header.empty();
	    this.page_header.append("<h1>popular</h1>");
	},
	recent: function(){
	    this.page_header.empty();
	    this.page_header.append("<h1>recent</h1>");
	},
	about: function(){
	    this.page_header.empty();
	    this.page_header.append("<h1>about</h1>");
	}
    })
};

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>backbone tab sample</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/base.css">
  </head>

  <body>
    <div class="topbar">
      <div class="fill">
	<div class="container">
	  <a class="brand" href="#home">Backbone Tab Sample</a>
	  <ul id="global-nav" class="nav">
	    <li><a href="#">Home</a></li>
	    <li><a href="#popular">Popular</a></li>
	    <li><a href="#recent">Recent</a></li>
	    <li><a href="#about">About</a></li>
	  </ul>
	</div>
      </div>
    </div>
    <div class="container">
      <div class="content">
	<div class="page-header" id="page-header">
	</div>
	<div class="row">
	</div>
      </div>
    </div>
    <script src="js/jquery-1.7.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/underscore.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/backbone.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript"></script>
    <script src="js/setup.js" type="text/javascript"></script>
  </body>
</html>