0からはじめるBackbone.js Part.2

Modelとはなんぞ

取り扱うデータの最小単位って覚えることにした。
CDアルバムなら曲、学校なら(学年・クラスがあって)生徒、とか。

で、ただのデータ構造そのものではなくそのデータを変更するとか状態を取得するとか、自分に関することはなんでも。
上手く言葉にできないのですが、そういうものらしい。

Backbone.jsのModel

だいたいあってる！（たぶん

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

さて。
公式によると、Modelに定義されてるのは以下。
多いｗ

• extend
• constructor / initialize
• get
• set
• escape
• has
• unset
• clear
• id
• idAttribute
• cid
• attributes
• changed
• defaults
• toJSON
• sync
• fetch
• save
• destroy
• validate
• validationError
• url
• urlRoot
• parse
• clone
• isNew
• hasChanged
• changedAttributes
• previous
• previousAttributes

まぁ暗記する必要はないと思うので流す。

Modelを作る

• extend
• constructor / initialize

var Song = Backbone.Model.extend({
	initialize: function(){
		// Model has created!
	}
});

var mySong = new Song({
	title: 'My first song',
	author: 'leader22',
	description: '<em>Awesome!</em>'
});

extendでModelを作る。
initializeで初期化処理。

Modelの値を取得、変更する

• get
• set
• escape
• has

mySong.get('title');// 'My first song'

mySong.set('title', 'My very first song');

mySong.escape('description');// '<em>Awesome!</em>'

mySong.has('author');// true

ちなみにset時には、Modelのchangeイベントが発火(正確にはModelのchangeとModelの変更があったAttrのchange)。
発火させたくないときは、

mySong.set('title', 'My very first song', {silent: true});

のようにオプションを指定。

Modelの値を削除する

• unset
• clear

mySong.unset('title');

mySong.clear();

clear()してもインスタンスが消えるわけではないみたい。

Modelのもつ情報(識別子系)

• id
• idAttribute
• cid

var song1 = new Song();// cid = "c1"
var song2 = new Song();// cid = "c2"
var song3 = new Song();// cid = "c3"

Modelのもつ情報(そのもの系)

• attributes
• changed
• defaults
• toJSON

mySong.attributes;
/*
{
	title: "My first song",
	author: "leader22",
	description: "<em>Awesome!</em>"
}
*/

mySong.set('title','Wahoo');
mySong.changed;
/*
{
	title: 'Wahoo'
}
*/

今さらですがModelには初期値を設定可能。

var Song = Backbone.Model.extend({
	initialize: function(){
		// Model has created!
	},
	defaults: {
		title: 'No name',
		author: 'Various artists',
		description: 'Some text...'
	}
});

上記attributesを一気に取りたいときは、

mySong.toJSON();
/*
{
	title: "My first song",
	author: "leader22",
	description: "<em>Awesome!</em>"
}

実際にはJavaScriptのオブジェクト(≠json)が取得できちゃう。
きちんとしたjsonが欲しい場合は、
*/
JSON.stringify(mySong);

Modelの値をサーバーとやり取りする

• sync
• fetch
• save
• destroy

ここをきっちりやらんとダメな気がするものの、まだ全然試せてないので箇条書きで・・。

mySong.save();// まるっと
mySong.save({'title', 'My new song'},{patch: true});// 一部だけ

mySong.save({
	success: function(){},// 成功時のコールバック
	error: function(){}// 失敗時のコールバック
});

mySong.destroy({
	success: function(){},// 成功時のコールバック
	error: function(){},// 失敗時のコールバック
	wait: true// サーバー側からのレスポンスを待って、上記コールバックを実行したい場合にtrue
});

Modelの値のバリデーション

• validate
• validationError

バリデーションには、2段階のステップが必要。
1. validateのロジックを書く
2. invalidイベントを拾う

var Song = Backbone.Model.extend({
	initialize: function(){},
	validate: function(attrs, options) {
		if (attrs.title === '') {
			return 'No title!';
		}
	}
});

var mySong = new Song();
mySong.on('invalid', function(model, error){
	alert(error);
});

mySong.save({title, ''});// 'No title!'

単純に文字列を返せばエラー認定になる。
ちなみにこのバリデーションはsave()の時には呼ばれるけど、set()の時には呼ばれない。
set()時にも使いたいなら、{validate: true}をオプションで渡す。

mySong.set({title, ''}, {validate: true});// 'No title!'

データの所在系

• url
• urlRoot
• parse

その他のユーティリティそのいち

• clone
• isNew

var myCopy = mySong.clone()

その他のユーティリティそのに

• hasChanged
• changedAttributes

mySong.on("change", function() {
  if (mySong.hasChanged("title")) {
    // ...
  }
});

前回のchangeイベントから、何か変更があったかどうかを捕捉する。
changeイベントが起こって、その中でさらに処理を分岐したい場合に使うらしい。
changedAttributesはその名の通り、変更のあったAttrを取得できる。

• previous
• previousAttributes

こちらも同じくchangeイベントが起こって、その中でさらに処理を分岐したい場合に。
これはchangeされたAttrのchangeされる前を取得できる。

所感

なんというか、できることはスッキリしていてわかりやすいと思う。
やっぱり試されるのは設計力ってやつか・・。