今日目標: 了解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行程式碼。是不是很酷啊? 不過話說回來對效能也是有一定的殺傷力，這是取捨的問題，沒有標準答案，就看開發者怎麼使用了。