2013-02-10

Backbone.js チュートリアル #1

はじめに

Backbone.jsのチュートリアルをやりました。#1〜5まであります。
index.htmlは共通で、main.jsを変更していきます。

下の２つのファイルを作成してindex.htmlを開いてください。Backbone.jsによってhello worldが表示されます。

index.html


  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>hello-backbonejs</title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

    <script src="main.js" type="text/javascript"></script>
  </body>
  </html>

main.js

(function($){

  var ListView = Backbone.View.extend({
    el: $('body'),

    initialize: function(){
      _.bindAll(this, 'render');
      this.render();
    },

    render: function(){
      $(this.el).append("hello world");
    }
  });

  var listView = new ListView();
})(jQuery);

コード解説

3行目

var ListView = Backbone.View.extend({

Backbone.Viewはビューです。モデルの表示を表現しますが、今回の例では固定文字を出力するのみです。extendメソッドで独自のビューを定義します。

4行目

el: $('body'),

elは描画位置を指定するViewオブジェクトのプロパティです。ここではbody要素を指定しています。

6行目

initialize: function(){

initializeはインスタンス化された時に自動的に呼ばれるメソッドです。

7行目

_.bindAll(this, 'render');

bindAllはUnderscore.jsのメソッドです。renderメソッドをthis（この場合はView）に束縛します。Backbone 0.5.2以降はbindAllを使用する必要はなくなったとのこと。

（参考１）http://www.ibm.com/developerworks/jp/web/library/wa-backbonejs/?cmp=dw&cpb=dwwdv&ct=dwrss&cr=dwrss&ccy=jp&csr=012712

（参考２）http://stackoverflow.com/questions/6079055/why-do-bindall-in-backbone-js-views

11〜13行目

render: function(){
  $(this.el).append("<ul><li>hello world</li></ul>");
}

renderメソッドの定義です。body要素にhello worldを追加します。

16行目

var listView = new ListView();

定義したListViewをインスタンス化します。initializeがコールされhello worldが描画されます。

次のチュートリアルでは、DOMイベントのバインドを行います。