読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

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

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