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

一応、公式読み漁りはコレでラスト。
てか書き溜めてたのすっかり忘れてた。

最後はViewです。

Backbone.jsのView

導入時のフレーズにもあった、Modelの更新を即座にキャッチしてViewを最新化できるからBackboneはすごいのよっていう部分。
どうやってDOMのソレとModelの更新を結びつけるかがキモっぽい。

extend
constructor / initialize
el
$el
setElement
attributes
$ (jQuery or Zepto)
render
remove
delegateEvents
undelegateEvents

Viewの生成

extend
constructor / initialize
el
$el

var PlayList = Backbone.View.extend({
	initialize: function(){
		// View!
	}
});

var playlist = new PlayList({
	model: Song,
	tagName: 'li'
});

コンストラクタをnewするときに、以下のオプションは直接指定可能。

model
collection
el
id
className
tagName
attributes

基本的にViewはelという要素をもってて、それにModelのデータをあわせてDOMを生成する。
何も指定してない場合はdivになるらしい。
そして、jQueryかZeptoを使ってればそれらでラップされたオブジェクトへも、$elでアクセスできるようになる。

Viewの要素へのアクセス

setElement
attributes
$ (jQuery or Zepto)
remove

setElement

いったん生成したViewのターゲットを変えたい時に使う。

attributes

生成したViewに指定したelの情報を取得したいときに。

$

基本的にViewのel以下のDOMツリーに大しては、$を使ってアクセスする。
それだけで$(hoge, el)とか$(el).find(hoge)のようにスコープを絞った状態で扱える。

remove

DOMからViewを削除。
貼ってたイベント系も一緒に削除してくれるそうな。

Viewの描画

render

DOMへの落とし込みに使う関数。
UnderscoreのテンプレートやったりHandlebarsやったり、何かと自分の状況に応じて拡張することになる関数。

var PlayList = Backbone.View.extend({
	el: $('ul'),
	initialize: function(){
		this.render();
	},
	render: function(){
		this.$el.html();
		return this;
	}
});

new Playlist();

Viewって概念はすごくあやふやですね・・。
DOMそのものでもなければ、イベントをBindするだけでもなく・・・、うーむ。
ロジック以外の見せ方に関するもの全て、みたいな。

イベントまわり

delegateEvents
undelegateEvents

View内の要素におけるイベントの付与とか。

var PlayList = Backbone.View.extend({
	events: {
		'click .btn.play': 'play',
		'click .btn.stop': 'stop',
		'mouseover .info': 'showInfo'
	},
	play: function(){},
	stop: function(){},
	showInfo: function(){},

	el: $('ul'),
	initialize: function(){
		this.render();
	},
	render: function(){
		this.$el.html();
		return this;
	}
});

new Playlist();

実態はjQueryのon/offみたい。
eventsで定義するのと、initializeで指定するのも多分一緒。
あくまでユーザーの操作によって発火させたいイベントのことで、Modelが更新されたとかそういうのとは別。
ただ逆に、Modelの更新を知らせる処理とかは、ココに書くしか無い。

所感

MVCというのかMVPというのか、巷では色々あるみたいですが、意味を見いだせるレベルに達していない身としては、だいたいこんな感じってのがわかっただけでもよしとします。

さっさとサンプル作ろう、そうしよう。