LotosLabo

プログラミング技術とか気になった情報を載せていきます

Backbone.jsについて1


Backbone.jsとは

いわゆるMV*と言われるアプリケーションフレームワークです。
MV*とはMVCとか、Model View Controlerでそれぞれ分けてアプリケーションを構築する方法です。


開発環境

backbone.jsを使う際には以下の3つが必要となります。

backbone.js
jQuery
underscore.js

ちょっとめんどくさいかもしれませんが用意しましょう。

まずbackbone.jsのインストールは公式サイトより行えます。
http://backbonejs.org/


しかし今回はCDNの方を使っていきます。
http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js

jQueryはこちら
http://code.jquery.com/jquery-1.11.0.min.js

underscore.jsはこちら
http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js


これをそれぞれhtmlファイルに追加していきます。

それでは型を作っていきます。

index.html

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Backbone.js</title>
</head>
<body>
	<h1>BACKBONE</h1>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
    <script type="text/javascript" src="app.js"></script>

</body>
</html>



スクリプトを追加する順番はこのようにしてください。
backbone.jsは先にjQueryとunderscore.jsが読み込まれていないとうまく読み込まれませんので。

そして、app.jsというjavaScriptファイルを作成し、今回はそっちにいろいろ記述していきます。


backbone.jsを始める

まずbackbone.jsの構成について説明します。

大きく分けると、

Model - オブジェクトの管理
View - 見た目
Collection - オブジェクトの一覧
(Router - ルーティング機能)

に分かれています。

Modelの作成

今回は全体としてタスクアプリケーションを作っていきます。
変数名はtaskなんちゃらとしていきます。

var Task = Backbone.Model.extend();
var task1 = new Task();



こんなかんじでモデルを作成しました。

これを応用して実践的にしてみたいと思います。

例: app.js

(function() {
var Task = Backbone.Model.extend({
	defaults: {
		title: "do something!",
		completed: false
	}
});
var task1 = new Task({
	completed: true
});
console.log(task1.toJSON());
})();



titleにdo somethin! とcompletedというのをfalseにしておきます。
そしてコンソールログに、toJSONという分かりやすい表示方法で出力します。

出力結果: Object {completed: true, title: "do something!"}


setとgetを使う

set

(function() {
var Task = Backbone.Model.extend({
	defaults: {
		title: "do something!",
		completed: false
	}
});
var task1 = new Task({
	completed: true
});

task1.set('title', 'newTitle');

console.log(task1.toJSON());
})();



task1.set('title', 'newTitle')とすることでタイトルが変更されます。

出力結果: Object {completed: true, title: "newTitle"}


get

(function() {
var Task = Backbone.Model.extend({
	defaults: {
		title: "do something!",
		completed: false
	}
});
var task1 = new Task({
	completed: true
});

task1.set('title', 'newTitle');
var title = task1.get('title');

console.log(title);
})();



値を取得します。
task1.get('title') とすることでtitleを取得できます。

出力結果: newTitle


toggle 値を1回目と二回目で変える

(function() {
var Task = Backbone.Model.extend({
	defaults: {
		title: "do something!",
		completed: false
	},
        toggle: function() {
              this.set('completed', !this.get('completed'));
        }
});
var task1 = new Task({
	completed: true
});

console.log(task1.toJSON());
task1.toggle();
console.log(task1.toJSON());
})();



出力結果: Object {completed: true, title: "do something!"}
Object {completed: false, title: "do something!"}

1回目がtrueだったのに対して、2回目はfalseに切り替わりました。


validate エラーチェックをする

(function() {
var Task = Backbone.Model.extend({
	defaults: {
		title: "do something!",
		completed: false
	},
        validate: function(attrs) {
               if ( _.isEmpty(attrs.title) ){
                 return "title must not be empty!";
            }
          },
        toggle: function() {
              this.set('completed', !this.get('completed'));
        }
});
var task1 = new Task({
	completed: true
});

console.log(task1.toJSON());
task1.set({title: ''}, {validate: true});
console.log(task1.toJSON());
})();



ここではまだViewができていないのでエラーメッセージを出すことは出来ませんが、
こういう風にvalidateを作っていきます。
今回はtitleが空の時にエラーを出すというのをしました。


Viewを作る

見た目となるものを作っていきます。

var TaskView = Backbone.View.extend({
});
var taskView = new TaskView({ model:task });



こんなかんじで作っていきます。

それを実践的に変えてみます。
先ほどのちょっと消して、書きなおしてみました。

例:

(function() {

// Model
var Task = Backbone.Model.extend({
	defaults: {
		title: "do something!",
		completed: false
	}
});
var task = new Task();

//View
var TaskView = Backbone.View.extend({
		tagName: 'li'
});

var taskView = new TaskView({ model:task });
console.log(taskView.el);
})();



今回はタスクアプリケーションを作っていくので、li属性を配置していきます。
また、console.logにはelというものを表示させます。これは自動的に生成されるもので、
また、$elとすることでHTMLでもjQueryにも使えるようになります。

出力結果:

<li></li>



テンプレートを使う

テンプレートを使ってliの中にtitleを表示させます。
templaterenderを使います。

(function() {

// Model
var Task = Backbone.Model.extend({
	defaults: {
		title: "do something!",
		completed: false
	}
});
var task = new Task();

//View
var TaskView = Backbone.View.extend({
		tagName: 'li',
	    template: _.template("<%- title %>"),
		render: function() {
		var template = this.template( this.model.toJSON() );
		this.$el.html(template);
		return this;
	}

});

var taskView = new TaskView({ model:task });
console.log(taskView.render().el);
})();



こんなかんじで書いていきます。
やばい、わからなくなってきた

出力結果:

<li>do something!</li>


外部テンプレートを使い画面に表示

今回からやっと画面に表示できます。
前回はテンプレートをjavaScriptの中でやりましたが、今回はhtmlにも分けてやっていきたいと思います。

例: app.js

(function() {

// Model
var Task = Backbone.Model.extend({
	defaults: {
		title: "do something!",
		completed: false
	}
});
var task = new Task();

//View
var TaskView = Backbone.View.extend({
		tagName: 'li',
template: _.template( $('#task-template').html() ),
render: function() {
		var template = this.template( this.model.toJSON() );
		this.$el.html(template);
		return this;
	}
});
var taskView = new TaskView({ model:task });
console.log(taskView.render().el);
$('body').append(taskView.render().el);
})();


例: index.html

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Backbone.js</title>

</head>
<body>
	<h1>BACKBONE</h1>
	<script type="text/template" id="task-template">
	  <%- title %>
    </script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>



templateでhtmlファイルのIDを指定しています。
そして最後に画面に表示するために$('body').appendというのを付け加えます。

f:id:lo25131:20140402172048j:plain