Google Material Design 學習03 - 清單+項目 = 圖片牆 | 進擊的網頁前端技術！ - 點部落

2014-07-08

Google Material Design 學習03 - 清單+項目 = 圖片牆

4783
0

摘要:Google Material Design 學習03 - 清單+項目 = 圖片牆

<core-list data="{{data}}" height="80">
<template>
<div class="{{ {selected: selected} | tokenList }}">List row: {{index}}</div>
</template>
</core-list>

項目元件

<paper-item icon="refresh">Refresh</paper-item>

今天來玩最常用的元件，清單與項目元件。

<core-list> 是polymer的核心HTML標籤，而 <paper-item>則是Polymer為了支援Material Design所開發的HTML標籤。清單標籤裡面放項目標籤，再搭配<template> 把資料放進去，就可以完成。

圖片牆範例如下

<paper-input id="sn" label="Store Name..." multiline></paper-input>

   <core-list id="list" style="height:320px">
     <template>
       <paper-item class="item" style="display:inline-block">
         <img src="{{iconURI}}" style="width:100%;height:100%">
       </paper-item>
     </template>
   </core-list>

拜Polymer所賜，HTML很簡潔，paper-input是輸入框，準備用來顯示點選的民宿名稱。core-list就是清單，裡面有用到template標籤，template標籤用來結合多筆民宿資料產生一張張圖片。{{iconURI}} 這是template變數的寫法，用來注入JSON資料中指定的Key欄位(也就是圖片網址)。範例的民宿資料是使用很有名的Coimotion服務所提供。

將兩個標籤設定id，準備進行控制

paper-input 設定id為 sn ，core-list 設定id為 list

由於使用polymer元件，所以必須等候元件初始化完成才能使用，所以JavaScript註冊 polymer-ready事件，在callback方法中註冊click事件 core-activate。

當使用者點選時，就可以直接從detail中拿到民宿資料，接下來再設定到輸入欄位 <page-input> 就大功告成了。

JavaScript程式碼如下

$(document).on('polymer-ready', function () {

list.addEventListener('core-activate', function (obj) {

sn.value = obj.detail.data.storeName;

});

其實這篇少介紹了template這標籤，雖然template沒寫在polymer-element裡面，無法使用polymer的expression功能，不過借由data-binding還是有很高的便利性。官方文件有提到如果一定要使用expression，還是可以借由auto-binding來實現，不過我實際試的結果，是可以沒錯。但是這會造成 template夾帶的資料不在core-list裡面，進而造成註冊core-list的 core-activate無法拿到資料 (因為資料在template這標簽肚子裡)。

不過話說回來，template標簽本身既然是寫在core-list肚子裡，所以core-list元件如果有考慮到template使用auto-binding情境，應該可以來個兩面通吃也不是不可能。不過這就要看開發元件的人願不願意優化了...Orz

core-list 源代碼

回首頁