iT邦幫忙

DAY 9
3

今日目標: 了解Model與Template 的多種綁定方式

Material Design 重裝上陣

今天將水果籃結合了最潮的 Google Material Design元件,並加入 event mapping,用來控制顯示水果籃的水果種類。從這個例子可以了解到元件間是如何透過data-binding,並透過更新model就可以更新View

[線上範例動手玩]

動手玩 :>

按 Apple,Orange,Bnana按鈕可以放到水果到水果籃,點選水果籃頁籤,可以查看某種類水果的數量,按 Eat 則是吃掉最後放進去的水果

先來看看範例網頁,變動不大,主要就是把醜醜的 HTML input 按鈕換成最潮的Material Design按鈕。

第2行 載入Material Design按鈕元件, <paper-button>

第11~15行 將原本的<input type='button'...>改成 <paper-button>元件,控制方式和先前完全一樣

[Github]

接下來是水果元件 <my-fruit>的改動,將原本放在my-fruit裡面的水果種類圖片資料移除,改統一由水果籃處理,再透過 kind 這個屬性注入

第2行 多增加kind屬性,由外部注入水果圖片資料

第14行 當name屬性改變時,從kind屬性取得指定水果名稱的圖片

[Github]

最後是水果籃元件,這元件主要改動有三

結合了Google Material Design的頁籤元件,並設定event-mapping

存放各種水果資料名稱和圖片

再增加一個 template 用來根據水果種類數量決定頁籤數量

先說明程式碼上半部

第1~2行 載入Material Design頁籤元件

第7行 設定此元件的CSS樣式 (可以來 這裡,挑你喜歡的樣式檔)

第8行 使用頁籤容器 <paper-tabs> 預設選最左邊第一個頁籤

第9~11行 使用template搭配repeat屬性,根據水果種類 list 決定頁籤數量

第10行 <paper-tab 使用了 on-click屬性,這是polymer訂的規則,將會自動綁定 tabClick 這 function,好讓事件觸發時元件可以處理,event mapping 詳細用法可以參考 這裡

[Github]

第14~16行 綁定此元件model的fruits屬性,顯示目前水果籃中水果數量

第18~22行 Iteratr Model的fruits屬性,判斷如果符合顯示水果種類,就插入 <my-fruit> 元素到DOM裡面

第26~28行 判斷目前的水果種類是否符合要顯示的水果種類,該用法可以參考昨天範例

第29~34行 存放水果種類與圖片資料,目前是寫死在水果籃內,不過其實也可以暴露水果資料屬性,由外部注入。

第39~41行 list是tab的頁籤容器,用迴圈將水果種類名稱放入list Array,由於Polymer 會自動 data-binding,所以頁籤畫面就會生出來了

第47~49行 由於每個用template生出來的元素,都會自動擁有 templateInstance這實例,方便我們拿到觸發事件來源的model資料,所以在這裡,我們只要將name屬性設定到 show 屬性,Polymer就會搞定一切,完成水果籃種類的切換。

為什麼只是設定 show 屬性,畫面就知道要重新顯示指定水果種類的圖片呢? 關鍵在程式碼第19行,如下

當我們透過template repeat產生水果時,有用到 show 這屬性,所以polymer就會知道如果 show 屬性異動,就會重新執行 18~22行程式碼。是不是很酷啊? 不過話說回來對效能也是有一定的殺傷力,這是取捨的問題,沒有標準答案,就看開發者怎麼使用了。


上一篇
Model、View 同步的各種方式 (⅔)
下一篇
用RWD讓悟空變身
系列文
你不能不知道的Polymer開發實戰30

尚未有邦友留言

立即登入留言