幫你的網頁加上 backbone(.js) 吧（二）！

今天要帶給大家的是 Backbone.js 的 View 的使用，這是「幫你的網頁加上 backbone(.js) 吧」的續集。這一系列的文章取材自於 Joe Zimmerman 的 Javascript Blog 影片教學單元，雖然用影片教寫程式是很棒的一件事情，但是，如果想要快速複習影片中的內容與重點，我相信文字才是最有效率的管道與方式。把影片翻譯成文章不是一件很容易的事，若內容有不夠周詳完整的地方，也懇請多多包涵！

在開始之前，推薦大家使用 JSFiddle，這是一個能讓人一邊看範例程式一邊動手修改，且能立刻看到執行結果的免費服務平台。文中的例子在可以在 http://jsfiddle.net/rightson/xp4pD/ 取得，歡迎多多利用，相信能讓大家看文章的過程更有感覺！

底下的範例希望能讓大家瞭解如何用 Backbone 的 View 和 Model 巧妙搭配，輕鬆寫出 Model 和 View 乾淨抽離的好程式。如果對 Backbone.js 的 Model 原理跟觀念感到陌生的話，也請先閱讀上一個單元之後再繼續往下瀏覽。

我們的目標很簡單：希望在按一下 button 之後，在畫面上印出相對應的內容。

這次除了 Underscore.js 以及 Backbone.js之外，我們還引進了jQuery，請參考底下的原始碼：

	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title>Learning About Backbone.js Views</title>
	<style type="text/css">
	#container{ padding:20px; border:1px solid #333; width:400px; }
	#list-template{ display:none; }
	</style>
	</head>
	<body>

	<div id="container">
	<button>Load</button>
	<ul id="list">
	</ul>
	</div>

	<div id="list-template">
	<li><a href=""></a></li>
	</div>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>

	<script type="text/javascript">

	/* 接下來的 javascript code 會寫在這裡 */

	</script>
	</body>
	</html>

view raw backbone2-view-env.html hosted with ❤ by GitHub

接著，讓我們先建立一個簡單的 Model 物件，這物件存著文字（text）和超連結（href）的資料，將會被等一下要建立的 View (template) 拿來使用。

	myModel = new Backbone.Model({
	data:[
	{ text: "Google", href: "http://google.com" },
	{ text: "Facebook", href: "http://facebook.com" },
	{ text: "Youtube", href: "http://youtube.com" }
	]
	});

view raw backbone2-create-my-model.js hosted with ❤ by GitHub

現在要正式進入重頭戲囉：建立 Backbone 的 View 衍生類別。透過呼叫 Backbone.View.extend 這 API ，我們可以傳入客制化的 View 所需要的各種屬性：

	var myView = Backbone.View.extend({
	initialize: function () {
	console.log('create view');
	},
	el: '#container',
	events: {
	"click button": "render"
	},
	template: $('#list-template').children(),
	render: function() {
	var data = this.model.get('data');
	for (var i=0, l=data.length; i<l; i++) {
	var a = this.template.clone().find('a');
	var li = a.attr('href', data[i].href)
	li = li.text(data[i].text).end();
	this.$el.find('ul').append(li);
	}
	}
	});

view raw backbone2-create-view.js hosted with ❤ by GitHub

initialize 是 View 的建構子，是當 View 物件被建立起來第一時間會執行一次的 method。

el 指的是 View 對應到的 DOM 物件，這個 DOM 上被觸發的 event 都會限制在這 DOM 物件底下被 Backbone.View 捕捉到。
在這例子當中，myView 會監視 '#container' 這個 DOM 物件，任何想監聽的相關 event 都可以被掌握。

events 是非常酷的東西，可以在裡面註冊 el 綁定的 DOM 的 event handler。
直覺的寫法是：

	events: {
	"click button": "render"
	},

view raw backbone2-click-button-event.js hosted with ❤ by GitHub

代表的是當 button 的 'click' event 觸發的時候，呼叫 render 這個 method。
也可以寫成：

	events: {
	"click": "render"
	},

view raw backbone2-click-render-event.js hosted with ❤ by GitHub

這表示只要這個 DOM 被 click 就會呼叫 render，很酷吧！

template 是指繪製 View 的時候的一份可套用的 DOM 。
這例子裡面 template 指定給 Id 為 'list-template' 的 DOM 的小孩。我們可以用 jQuery 的 selector 來選出 '#list-template'，所以當我們在其他 method 裡寫：

this.template.clone()

就相當於複製了一份DOM物件出來，例如：

view raw backbone2-view-li.html hosted with ❤ by GitHub

render 是 View 內建的 method，可以透過重新定義 (override) 這個 method 讓我們可以操作改變 el 的外觀。例如把從 model 裡面拿出資料塞入 template，再置換 DOM 的外觀，還有很多種實作的方式，可以參看 Underscore.JS 相關的文件以獲得更深入的瞭解。
在這個例子當中， button 的 click event 會觸發 render，而 render 做的事情就是把塞入資料的「template」 append 到既有的 el 後面：首先透過 this.model.get() 來取出 model 的資料，再用 this.template.clone() 複製一份 DOM，接著透過操作 this.$el (還記得前面提的el 嗎？$el 是用 el 的 jQuery 參照，可以直接當做 jQuery 物件來操作) 把 model 取出來的資料用修改 a 的屬性 (attr 和 text ) 的方式新增一筆 li，然後塞到 el 的最後面。

最後，用剛才繼承的 Backbone View 把 View 物件建出來：