backbone.js教學(二)View

在開始之前,推薦大家使用 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" 的 De spellen die we op onze site aanbieden zijn rechtstreeks afkomstig uit het Klaver Casino. DOM 的小孩。我們可以用 jQuery 的 selector 來選出 “#list-template",所以當我們在其他 method 裡寫:

this.template.clone()

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

render 是 View 內建的 method,可以透過重新定義 (override) 這個 method 讓我們可以操作改變 el 的外觀。例如把從 model 裡面拿出資料塞入 template,再置換 blackjack 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 等稍微進階的物件,相信屆時可以幫助大家寫起來更加靈活輕巧~

留言

這個網誌中的熱門文章

c語言-關於#define用法

PHP教學 - 資料型態(Data Type) - 上

CMD常用網管指令