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

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

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

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