iT邦幫忙

DAY 8
2

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

接續昨天例子,接下來我們進一步將template repeat , model 封裝到元件中

綁定範例3 - 元件內使用template repeat屬性 [線上範例]

昨天綁定範例2是直接在html上使用template 。在這個範例,我們增加一個水果籃標籤<my-fruit-basket>,用來放水果 <my-fruit> 。

然後改直接在polymer自定元件內的template使用data-binding,並進一步將使用方式進行封裝,讓外部用起來感覺更像是一個功能完整的HTML標籤,使用上也不用知道太多技術細節,用就對了,這就是元件真正要提供的價值。

在這個例子提供四顆按鈕,按下apple,bnana,orange就會將水果放到下方水果籃裏面,按下remove就會清除最後放進去的水果

[線上範例]

先看看實際使用的html,感覺很清爽簡潔

[Github]

第19~22行: 放四顆按鈕,按下後呼叫 add() , del() 方法

第24行: 水果籃元件,用來放水果

第26~29行: 拿出水果籃元件,呼叫basket()方法將水果資訊放進去

第30~33行: 拿出水果籃元件,呼叫basket()方法移除最後放進去的水果

接下來看看水果籃元件程式碼

比較關鍵的地方應該是 template的使用方式,第11~16行。

這兩個template分別使用了 bind , repeat 這兩個屬性,bind用來產生單個template實例,而repeat則可以產生多個template實例

[Github]

第11~13行: 綁定 Model 裡面的fruits (在第22行宣告),顯示目前fruits陣列總長度(也就是放了幾顆水果)

第14~16行: 也是綁定 fruits ,不過這裡是用repeat,所以會iterator Array,交由 <my-fruit> 產生水果長相

第21~23行: 元件完成初始化後,設定 fruits這model

第24~26行: 提供 basket 方法,讓外部可以直接取得fruits這陣列(籃子)

綁定範例4 - 限定水果籃顯示種類 [線上範例]

template可以設定條件,符合條件會產生template實例。我們就來實驗一下這功能,將水果籃元件加上 show 屬性如下 [只顯示放進去的香蕉 XD]

水果籃元件第3行增加 show 屬性,並在第15行增加 if 判斷,然後第22~24行添加判定是否產生template實例。

待續....

參考資料

template 產生實例各種方式介紹

template binding 各種方式

expression 用法介紹

香蕉應該是 banana XD


上一篇
Model、View 同步的各種方式 (⅓)
下一篇
Model、View 同步的各種方式 (3/3)
系列文
你不能不知道的Polymer開發實戰30

尚未有邦友留言

立即登入留言