幫你的網頁加上 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，請參考底下的原始碼：


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

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

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

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

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

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

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

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

   this.template.clone()

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


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 物件建出來：

記得指定這個 view 要使用的 model！

讓我們來看看上面的程式跑出來的結果：按下 button 之後會得到底下的結果：

怎麼樣，很簡單易用吧！

到目前為止介紹的的兩個物件 Model 和 View 已經足夠做出大部分的功能囉！
將來還會陸續介紹 Routers 以及 Collection 等稍微進階的物件，相信屆時可以幫助大家寫起來更加靈活輕巧～

Happy Coding!


延伸閱讀

• 幫你的網頁加上Backbone(.js)（一）： Model
• 幫你的網頁加上Backbone(.js)（二）： View
• 幫你的網頁加上Backbone(.js)（三）： Router
• 幫你的網頁加上Backbone(.js)（四）： Collection
• 幫你的網頁加上Backbone(.js)（五）： AJAX