iT邦幫忙

DAY 7
2

今日目標: 了解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 用法介紹


上一篇
Polymer 自定HTML標籤-GoogleMap三重奏(下)
下一篇
Model、View 同步的各種方式 (⅔)
系列文
你不能不知道的Polymer開發實戰30

尚未有邦友留言

立即登入留言