はじめに
Backbone.jsのチュートリアルをやりました。#1〜5まであります。
index.htmlは共通で、main.jsを変更していきます。
下の2つのファイルを作成して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
コード解説
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を使用する必要はなくなったとのこと。
(参考2)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イベントのバインドを行います。