Backbone.jsを始めてみる

タイトル通り、以前から勉強しようと思ってたBackbone.jsを始めてみる事に。でこれどう説明すれば良いのかが微妙だけど、「RESTful WebアプリケーションのためのJSサイドのMVCフレームワーク」的な感じかなと。一応色々機能があって(ry

とにかく、 http://backbonejs.org を読みつつ進めてみる

概要

ボタンを押すとサーバーから配信されるJSONレスポンスがViewにバインドされるような感じな物を作る。概要としてBackbone.View、Backbone.Model、Backbone.Collectionを使ってサーバーから配信されるJSONレスポンスを元にUIを構築

な感じかなーっと

Backbone.js動作環境の構築

Backbone.jsはjQueryとunderscore.jsが必要なのでそれも取ってくる。必要なバージョンに関しては公式ドキュメント(っていうかサイト)に書いてるのでそれに伴うバージョンを利用する事

index.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript" src="js/backbone.js"></script>
  </head>
  <body>
    <button id="btn" style="padding: 10px">click</button>
    <div id="content"></div>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

index.js

var App = {
  "Models": {},
  "Collections": {},
  "Views": {}
};

// Backbone.Model
App.Models.Sample = Backbone.Model.extend({});

// Bacakbone.Collection
App.Collections.Sample = Backbone.Collection.extend({
  "model": App.Models.Sample, // Backbone.Collectionが参照するBackbone.Model
  "url": "http://localhost:5000/fetch/samples" // fetchで使用するURL。/からの指定でもオッケーらしい (ドキュメントによると)
});

// Backbone.View (SampleView)
App.Views.SampleView = Backbone.View.extend({
  "el": $("#content"),
  "render": function() {
    var el = this.$el;

    var col = new App.Collections.Sample();
    col.fetch({
      "success": function(collection, models) {
        models.forEach(
          function(model) {
            // ここのmodel変数はBackbone.Modelでは無い (ただのObject)
            el.append($("<h2>").text(model.name));
          }
        );
      }
    });
  }
});

// Backbone.View (ButtonView)
App.Views.ButtonView = Backbone.View.extend({
  "el": $("#btn"),
  "initialize": function() {
    // 初期化時に指定されているエレメントに動的にクラスを割り当て設定を行う
    // 別に必要ないけど、Backbone.Viewスコープでそういうのをやる場合どうするのかっていう所な疑問が出たので(ry
    this.$el.addClass("btn btn-large btn-primary");
  },
  "events": {
    // クリックイベント
    "click": function() {
      new App.Views.SampleView().render();

      this.remove();
    }
  }
});

new App.Views.ButtonView();

流れ的には

App.Views.ButtonViewで<button>とBackbone.Viewを組み込む
ボタンクリック時にApp.Views.SampleViewのrenderメソッド?を実行。でその後、ButtonViewなのをremove
SampleView.renderでBackbone.CollectionなApp.Collections.Sampleをfetchしてその結果をビューへバインド