[JavaScript] Backbone.jsのModelとCollectionを入れ子にしたい

2014/04/7

こんにちは。きんくまです。

Backbone.jsは本格的に使ったことがなくて、Underscore.jsのテンプレート機能だけ使ったり、テンプレートとBackboneのViewだけを組み合わせて使ったりしてました。
そしたら、結構うまくいったので、これはなかなか良い！と思い、RoutingのところもIE7でテストしたところ、普通に動いてました。（#のハッシュの方で。）
なので、今度はModelとかもからめて本格的に一度使ってみようと思いました。

で、ModelというかCollectionの入れ子構造ってどうやってやるのかと思いやってみたのが今回の記事です。

今回は、下のサイトの記事を参考にしてますので、オリジナルの記事も合わせてどうぞです。
>> Backbone.js – Structuring Nested Models and Collections

想定

会社の部署ごとのデータを作るとします。

営業部（2F）
・さとうさん（35）
・たなかさん（42）

制作部（4F）
・さくらいさん（21）
・かねこさん（52）

という会社があるとして、これをjson化するとこんな感じになりました。

js/departments.json

[
	{
		"name":"営業部"
		,"floor":"2F"
		,"employees":[
			{
				"name":"さとう"
				,"age":35
			}
			,{
				"name":"たなか"
				,"age":42
			}
		]
	}
	,{
		"name":"制作部"
		,"floor":"4F"
		,"employees":[
			{
				"name":"さくらい"
				,"age":21
			}
			,{
				"name":"かねこ"
				,"age":52
			}
		]
	}
]

で、これのModelとCollectionなのですが、

1. Model 従業員 Emloyeeを作る
2. Collection 従業員たち EmployeesCollectionを作る
3. Model 部署 Departmentを作る　（その中のプロパティのひとつがEmployeesCollection）
4. Collection 複数部署 DepartmentsCollectionを作る

という感じにひとつずつModel, Collectionを作っていけばいいみたいです。

これのjs（案件のときはTypeScriptで書いているのだけど、今回は素のjsです。）

$(function(){

var Employee = Backbone.Model.extend({
	initialize:function(){
		this.name = this.get('name');
		this.age = this.get('age');
	}
});

var EmployeesCollection = Backbone.Collection.extend({
	model:Employee
});

var Department = Backbone.Model.extend({
	initialize:function(){
		this.name = this.get('name');
		this.floor = this.get('floor');
		this.employees = new EmployeesCollection(this.get('employees'));
	}
});

var DepartmentsCollection = Backbone.Collection.extend({
	model:Department
	,url:"js/departments.json"
	,parse:function(data){
		return data;
	}
});

var departments = new DepartmentsCollection();
departments.fetch({
	success:function(){
		var result = departments.where({name:"制作部"});
		var createDiv = result[0];
		console.log(createDiv);

		var result2 = createDiv.employees.filter(function(employee){
			//30歳以上
			if(employee.age > 30){
				return true;
			}
			return false;
		});
		console.log(result2[0]);
	}
});

という感じです。あまり制限なく、ゆるく使えるBackboneは良い感じですね。