backboneの基礎の基礎 第3回[ビューの追加]

今回はメンバー詳細を画面に追加する。
こんな画面。詳細ボタンをクリックすると、下に選択したメンバーの詳細が表示される。
上がこれまでからあったviewで下が新規作成するviewになります。

上がチーム紹介レイアウト、下がメンバー詳細レイアウト。

![第3回画面.png](https://qiita-image-store.s3.amazonaws.com/0/79214/069e9648-d227-51ad-0ce9-17f9c395eae3.png)

ざっくりと修正内容を書くとー
チーム紹介レイアウトに詳細ボタンを追加。これはtemplateを修正する。
詳細押下イベントを監視し、押されたらメンバー詳細レイアウトを作成する。これはTeamAboutView.js(チーム紹介のjs)が行う。
チーム詳細を表示するのは新規作成するMemberDetailView.jsが行う。詳細画面を描画する時に使うtemplateと描画する位置は大枠の「layout.html」に追加する。

それぞれの詳細はー

まずは大枠の「layout.html」。

```html
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>backbone.jsの超簡単サンプル 2回目</title>
	</head>
	<body>
		<!-- view表示用タグを埋め込む -->
		<div id="about"></div>
		<br>
		<div id="memberDetail"></div>
		
		<!-- ここは外部ライブラリの読み込み -->
		<script src="js/lib/jquery-2.1.4.min.js"></script>
		<script src="js/lib/underscore-min.js"></script>
		<script src="js/lib/backbone-min.js"></script>
		
		<!-- template読み込み -->
		<!-- チーム紹介 template -->
		<script type="text/template" id="about-template">
			<div>
				<div>名前: <span><%= name %></span></div>
				<div>生年月日: <span><%= birthday %></span></div>
				<div>ポジション: <span><%= position %></span></div>
				<div><input type="button" class="detail" value="詳細" id="<%= index %>"></div>
			</div>
		</script>
		
		<!-- メンバー詳細 template -->
		<script type="text/template" id="member-detail-template">
			<div>
				<div>名前: <span><%= name %></span></div>
				<div>生年月日: <span><%= birthday %></span></div>
				<div>ポジション: <span><%= position %></span></div>
				<div>背番号: <span><%= number %></span></div>
				<div>趣味: <span><%= hobby %></span></div>
				<div>今季の意気込み: <span><%= zeal %></span></div>
			</div>
		</script>
		
		<!-- モデル -->
		<script src="js/MemberModel.js"></script>
		
		<!-- コレクション -->
		<script src="js/TeamCollection.js"></script>
		
		<!-- チーム紹介ビュー -->
		<script src="js/TeamAboutView.js"></script>

		<!-- メンバー詳細ビュー -->
		<script src="js/MemberDetailView.js"></script>
		
		<script>
			<!-- DOM読み込み完了後に実行 -->
			$(function() {
				// ビューを生成し、処理を開始する。
				new app.TeamAboutView();
			});
		</script>

	</body>
</html>
```

メンバー詳細レイアウト描画用の**メンバー詳細 template**を追加している。
それとメンバー詳細レイアウトを描画する位置となる**\<div id="memberDetail">\</div>**を追加。
さらに、メンバー詳細ビュー用のjsファイルである**MemberDetailView.js**を読み込んでいる。
以上の3点が前からの変更点。

次は**TeamAboutView.js**

```js
var app = app || {};

app.TeamAboutView = Backbone.View.extend ({
	el : '#about',
	
	aboutTemplate : _.template($('#about-template').html()),
	
	collection : '',
	
	events : {
		'click .detail' : 'dispDetail',
	},
	
	initialize : function() {
		this.collection = new app.TeamCollection();
		
		// データを取得する。
		this.collection.fetch();
		
		// データ取得後に、画面を描画する。
		this.listenTo(this.collection, 'sync' , this.render);
	},
	
	render : function() {
		var that = this;
		
		var i = 0;
		
		// コレクションに入っているデータ件数分、メンバーを表示する。
		this.collection.each(function(model){
			model.set('index', i);
			that.$el.append(that.aboutTemplate(model.toJSON()));
			
			i++;
		});
	},
	
	dispDetail : function (event) {
		// indexを取得する。
		var index = $(event.target).attr('id');
	
		// modelを取得する。
		var memberModel = this.collection.models[index];
		
		// メンバー詳細を表示する。
		var options = {
			model : memberModel
		};
		new app.MemberDetailView(options);
	}
});
```

まず、eventsプロパティを追加している。これはbackboneのプロパティでここに書いたイベントを監視してくれる。
今回だと

```js
	events : {
		'click .detail' : 'dispDetail',
	},
```
と書いてるけど、これは **classのdetailが設定されているオブジェクトがクリックされるとdispDetailメソッドを実行して**ということ。
clickとかchangeとかmouseoverとかいろんなイベント監視してくれる。clickのところが監視のイベントなので、そこをchangeやmouseoverに変更すればOK。

このeventsはめちゃくちゃ使いますねー。

そして、dispDetailメソッドを追加。
ここでメンバー詳細viewを作成している。newする時のパラメータとしてmodelを渡している。こうやって渡すと渡した側のviewのmodelプロパティで参照できる。
チーム紹介viewはメンバーmodelをコレクションで保持しているので、何番目のmodelを渡すのかが必要となるけど、これはチーム詳細ボタンのid属性としてしこんでいる。
このid属性は**$(event.target).attr('id')**で取得できるー。

最後は新規作成するチーム詳細viewのjs。MemberDetailView.js。

```js
var app = app || {};

app.MemberDetailView = Backbone.View.extend ({
	el : '#memberDetail',
	
	memberTemplate : _.template($('#member-detail-template').html()),
	
	model : '',
	
	initialize : function() {
		// 前に描画したメンバー紹介を削除する。
		this.$el.empty();
		
		// 画面を描画する。
		this.render();
	},
	
	render : function() {
		// パラメータで渡されたmodelで画面を描画する。
		this.$el.append(this.memberTemplate(this.model.toJSON()));
	},
});
```

TeamAboutView.jsにもある使用するテンプレートと位置となる、**memberTemplate**と**el**プロパティを定義。
renderメソッドでメンバー紹介viewからパラメータで渡されたmodelを使って画面を描画。

これでメンバー紹介を表示できる。
initializeで**this.$el.empty();**をしているのは、これをしないと表示しているメンバー詳細が残ったままになってしまうから。

以上が今回の変更点。
あと、サーバサイドのレスポンスのjsonに背番号と趣味と内容の追加が必要。

[ソースはここ](https://github.com/naka4A6/backbone_3)

ではっ！