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

瀏覽器根據DOM結構繪製畫面的長相，所以只要改變DOM就能更新View，而資料則是放在Model裏面，當View和Model自己能雙向綁定與更新，我們開發也就方便輕鬆多了。

所以接下來的例子，將以 <my-fruit> 這自定HTML標籤為例，一步步說明Model與Template是如何綁定，以及template標籤怎麼產生template實例，然後放到DOM裡面。

綁定範例1 - 屬性綁定 [線上範例]

功能說明: 設定name屬性，可以顯示對應的水果圖片

標籤用法:

畫面長相:

使用範例程式碼: [Github]

第4行: 載入platform.js ，讓瀏覽器立馬支援WebComponent用法

第5行: 載入自定標籤 <my-fruit> 這個元件

第8行:使用 <my-fruit> 這標籤，設定name='orange'

也可以透過Javascript控制此元素，例如

document.querySelector('my-fruit').setAttribute('name','apple');

查看此元素 model 也可以的確改變了

> document.querySelector('my-fruit').name
"bnana"

如果直接改變元素的 model ，也能更新element屬性 (也就是改變View)

OK，接下來看自定標籤 <my-fruit> 程式說明

第2行: attributes 這屬性是用來宣告外部可使用的屬性名稱，這裡就是 name屬性

第4行: 設定此自定標籤的Model有name，Polymer會自定和提供給外部的name屬性進行自動雙向綁定

第15行: nameChanged是Polymer提供的callback方法，會在name屬性值改變時觸發，讓我們可以介入處理。這裡是將屬性值轉成圖片的url位置，然後設定到 img 標籤的 src 屬性

[Github]

綁定範例2 - 使用template repeat屬性

在這個例子，我們直接在網頁裡使用template標籤，以及template標籤的repeat屬性，實現一次顯示多種水果的功能。

透過template的repeat屬性，我們可以傳入一個Array，裡面放多筆Model資料，polymer會自動 iterator 每筆model資料，一筆model資料產生一個template實例，然後放入DOM，瀏覽器再負責解析DOM產生View

[_線上範例]_

Polymer會自動在我們設定templete元素的model 時，自動進行更新。所以只要第9行和第14行的model名稱 (fruits) 設定一致就可以了

[Github]

在綁定範例二，我們在網頁裡使用 template 標籤與model屬性進行綁定，是為了簡化展示其用法。使用polymer會有兩種人，一種是直接拿寫好的自定標籤使用，達到他的目的。例如想用地圖就使用<googl-map>標籤，想知道有哪些屬性或方法就查找API。

另外一種人就是開發自定標籤的人，考量的是打造一個實現特定功能，能重複使用，最好又很有彈性並兼顧效能、維護性。

所以在這個例子，對拿<my-fruit>標籤來使用的開發者而言，還要知道polymer提供的 repeat 屬性，model如何綁定等技術細節，等於強迫開發者要了解polymer才知道怎麼用<my-fruit>，這就會造成一個門檻。

身為元件就是應該要封裝技術細節，讓開發者使用自定標籤，也能像使用標準HTML標籤習慣一致，才能發揮真正降低使用門檻，讓開發者舒服、方便。所以開發元件的開發者，想到越透徹，做得越全面，使用元件的開發者就會越舒服，越方便。

Google搜尋人人都會用，夠簡單了吧? 但是按下搜尋那一刹那，背後多麼複雜，這就不用多說了 XD

另外一點，在polymer自定標籤內使用template，功能更強，能做的事情更多。與我們現在直接在網頁中使用，本質上有差異，詳情請參考 [這裡]

參考資料

template 產生實例各種方式介紹

template binding 各種方式

expression 用法介紹