iT邦幫忙

DAY 6
2

你不能不知道的Polymer開發實戰系列 第 6

Polymer 自定HTML標籤-GoogleMap三重奏(下)

今日目標: 了解元件包裝原始碼

延續昨天範例,接下來說明元件 完整程式碼 [線上範例]

第1行是載入polymer基本元件與polymer核心程式

第2行是載入 google-map 元件,我們這個自訂元件會使用到

第4行是自訂元件的宣告,name是宣告標籤名稱,attributes則是外部可以存取的屬性名稱

第05~20行是 template 區塊,用來顯示元件長相

第22~44行是 設定元件的方法和屬性

<template>區塊

第07~12行 設定css在同一列顯示三個GoogleMap

第14~19行 顯示三個GoogleMap,mapType設定不同種類,而屬性 latitude、longitude、zoom則綁定外部傳進來的屬性,也就是polymer標籤上的attributes屬性。這裡要注意的是,{{..}} 屬性宣告會自動完成data-binding,也就是三個GoogleMap之中任何一個的zoom屬性異動,都會自動完成更新

<script>區塊

第23行 由於<script>區塊是javascript全域,所以用匿名function包起來

第24行 設定整個元件的共用變數 init,用來控制初始化

第27行 ready是polymer預設的初始化方法,將在元件完成初始化後呼叫

第28行 保存this準備在callback function裡面使用

第29行 google-map元件載入GoogleMap API ready時會觸發 'google-map-ready' 事件,所以這裡註冊listener是進行三個地圖的事件綁定

第34~42行 對每個googleMap註冊 center_changed 、zoom_changed事件。center_changed是使用者用滑鼠移動地圖時觸發,我們就可以取得目前地圖的中心點位置。zoom_changed則是使用者縮放地圖比例時觸發,因為polymer會自動data-binding,所以只要將 坐標設定到 self.latitude、self.longitude就會自動更新到三個地圖,就能完成同步顯示的功能了 :>

如下圖所示

另外在hookEvent 方法中,使用 self.$[id] 是polymer所提供的功能,由於封裝的特性,自訂的polymer元件在template裡面寫的html元素,所指定的id都不會暴露到真正的DOM,開發者在撰寫元件功能時,如果需要存取template裡面所寫的元素,就可以直接用 this.$.id 方式直接取得,方便操控。

詳細說明可以看這邊

完整程式碼 [線上範例]


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

尚未有邦友留言

立即登入留言