Post on 29-Nov-2014
description
你不能不知道的 PolymerJS 開發實戰
2014-08-30 Marty
分享項目
● 建置本機 Polymer 環境● 打造自己的HTML標籤● 樣板+雙向繫結● 武器庫● 資源
WebCompoents
這是瀏覽器都要支持的約定...
WebCompoents
但是現況是...
IE反應是慢了一些
WebComponents 支援程度
IE反應是慢了一些
WebComponents 支援程度 (platform.js+)
很明顯，Polymer 幹的是苦差事 (看很遠)
"X-Tag and Polymer are both high-level sugar libraries that build upon the W3 Web Components specs - each introduces a different approach to making development of web components an even more amazing experience. To help make this more relatable, consider the following: jQuery : DOMX-Tag/Polymer : WebComponents."
本機環境建置 1/3 安裝 NodeJS、Bower
1. 裝 nodejs2. npm install -g bower3. 裝本機Server npm install -g serve
(或python -m SimpleHTTPServer)
https://www.youtube.com/watch?v=1rz334A8U7o
本機環境建置 2/3 安裝 Polymer
//先建個目錄
mkdir polymer
//進去polymer目錄，進行bower初始化,也就是產生bower.json
bower init
//裝 paper元件(Material Design)就好了bower install --save Polymer/paper-elements
//裝 Google 元件 <google-map> (http://googlewebcomponents.github.io)bower install --save GoogleWebComponents/google-map
polymer 框架和元件們
本機環境建置 3/3 (確認)
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
</head>
<body>
<link rel="import"href="bower_components/google-map/google-map.html">
<style>
google-map {
display: block;
height: 600px;
}
</style>
<google-map latitude="22.605153" longitude="120.301125"
disableDefaultUI showCenterMarker zoom="18"></google-map>
</body>
</html>
先嘗鮮 <template> bind
實戰#1 - 打造自己的 Element
Link
打造自己的 Element <post-card>
<script src="bower_components/platform/platform.js"></script><link rel="import" href="bower_components/core-icons/core-icons.html"><link rel="import" href="bower_components/paper-tabs/paper-tabs.html"><link rel="import" href="bower_components/paper-tabs/paper-tab.html">
打造自己的 Element
Any <h2> children match the second <content> tag and are inserted here.
<post-card>...</post-card>
insert pointer
如果可以有很多..
Link
實戰#2 - template + data-binding
● HTML5 new Tag - <template>● Object.observe() - Polymer data-binding
實戰#2 - template + data-binding
<template>
template (n) - A document or file having a preset format, used as a starting point for a particular application so that the format does not have to be recreated each time it is used.
IE反應是慢了一些...
template 用法 (搭配Polymer data-binding)
<paper-tabs selected="0" role="tablist" id="tab"> <template id="tabItem" repeat="{{tabs}}"> <paper-tab role="tab">{{name}}</paper-tab> </template></paper-tabs>
var models = { tabs: [ {name: 't1' }, { name: 't2'}, {name: 't3' }]};
$(document).on('polymer-ready', function () { $('#tabItem')[0].model = models;
$('#add').on('click', function () { models.tabs.push({ name: 'NewTab' }); });
$('#del').on('click', function () { models.tabs.pop(); });});
對model操作自動綁定UI
感受一下 paper 元件和雙向綁定
Link
Note: The <template> element is a new element in the HTML standard. For information on using templates outside of Polymer, see HTML’s New Template Tag on HTML5Rocks.
Link
Dynamic,
two-way data binding
武器庫
人臉追蹤、聲音播放/辨識
trackingjs.js
voices Web Component wrapper to the Web
Speech API, that allows you to do voice
recognition and speech synthesis using
Polymer
GoogleSheets + Goole Map (改成雙向,有坑!)http://googlewebcomponents.github.io/google-sheets/components/google-sheets/demo.html
Step1 改成 bind model + draggable='true'
Step2 fix google-map updatePosition(...)
Resource
● Are We Componentized Yet?● Data-binding Revolutions with Object.observe()● HTML5 ROCKS● Component Kitchen● Custom Elements● http://trackingjs.com/docs.html#web-components