今日目標: 學習 Template auto-binding + core-media-query 元件

今天我們要整合底下三樣素材, 目標就是讓悟空可以隨著螢幕尺寸變身為超級賽亞人, 真是太有趣了. 現在就開始吧~

[線上試玩]

素材一 <core-media-query>

Polymer 核心元件庫 , 有一元件能幫助開發RWD網頁. 現在開發Web應用一定要面對各種螢幕尺寸. 所以今天 <core-media-query> 這HTML自訂標籤, 它包裝了 css media-query 並提供 event-trigger , 是一個開發RWD網頁不錯的選擇.

素材二 <template is='auto-binding'>...</template>

開發者不大可能一下子就全部用元件方式開發網頁 , 所以polymer提供了可在既有網頁下使用 template , 而且又可以雙向data-binding的用法 , 只要在 <template> 加上 is='auto-binding' 就可以使用.

素材三 <template if='...'> + {{expressions}}

template可以搭配polymer 提供的表述式 , 用來決定條件成立才套用template

元件組裝說明 [Github]

最外層是template 使用 auto-binding, 讓元件共享資料改變

撰寫四個 core-media-query 標籤 , 用query屬性賦予不同的尺寸

撰寫四個 template 加上expression

當core-media-query偵測螢幕寬度改變, 更新 queryMatches true|false

template的expression根據queryMatches決定是否顯示

接下來說明一下程式碼 , 首先準備一張悟空變身集合照

原圖連結位置

第4行 一開始當然是先載入 platform.js 支援 WebComponent 使用

第5行 載入polymer核心元件 <core-media-query> HTML標籤

然後用css來切圖片, 準備用來選取指定的悟空等級 XD

第20行 使用 template 標籤搭配 auto-binding , 這樣polymer會自動同步template內所有元件的變數 {{...}} 更新

第21~28行 使用core-media-query標籤 , 當寬度成立時 , queryMatches=true , 設定 {{lvXXScreen}} 變數存放起來

這裡應該是最關鍵所在

第31~34行 當width>900px時使用此template //超級賽亞人4

第35~38行 當width介於 768px~900px 時使用此template //超級賽亞人3

第39~42行 當width介於 640px~768px 時使用此template //超級賽亞人2

第43~46行 當width介於 480px~640px 時使用此template //超級賽亞人1

OK , 如果只是要根據螢幕尺寸換圖片 , 用css的media query足矣 . 這裡使用元件方式來實現是為了熟悉上述三種素材如何大鍋炒後享用. 瞭解上述原理後就可以做出很多 css media query沒辦法做的效果.

最後 , 有沒有發現 ? 這個範例完全沒有寫到 JavaScript 就完成了. 純粹就是兜元件加上expression 就完成了. 有點可惜沒用到 <core-media-query> event trigger的功能

參考資料

Polymer Expressions

core-media-query 講解範例

template auto-binding

core-media-query 元件說明