PolymerJS 開發實戰
11 likes2,653 views
The document discusses practical development with Polymer.js, including setting up a local environment, creating custom HTML elements, and implementing two-way data binding using templates. It emphasizes the use of web components and provides coding examples for various implementations, such as Google Maps integration and dynamic tab creation. Additionally, it touches upon challenges with browser support and offers resources for further learning.
![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](https://image.slidesharecdn.com/polymerjs-140830073712-phpapp02/85/PolymerJS-25-320.jpg)
PolymerJS 開發實戰
- 1. 你不能不知道的 PolymerJS 開發實戰 2014-08-30 Marty
- 2. 分享項目 ● 建置本機 Polymer 環境 ● 打造自己的HTML標籤 ● 樣板+雙向繫結 ● 武器庫 ● 資源
- 5. IE反應是慢了一些
- 7. IE反應是慢了一些
- 9. 很明顯，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 : DOM X-Tag/Polymer : WebComponents. "
- 10. 本機環境建置 1/3 安裝 NodeJS、Bower 1. 裝 nodejs 2. npm install -g bower 3. 裝本機Server npm install -g serve (或python -m SimpleHTTPServer) https://www.youtube.com/watch? v=1rz334A8U7o
- 11. 本機環境建置 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
- 12. polymer 框架和元件們
- 13. 本機環境建置 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>
- 17. 實戰#1 - 打造自己的 Element Link
- 18. 打造自己的 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">
- 19. 打造自己的 Element Any <h2> children match the second <content> tag and are inserted here. <post-card>...</post-card> insert pointer
- 20. 如果可以有很多.. Link
- 21. 實戰#2 - template + data-binding
- 22. 實戰#2 - template + data-binding ● HTML5 new Tag - <template> ● Object.observe() - Polymer data-binding
- 23. <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.
- 24. IE反應是慢了一些...
- 25. 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
- 26. 感受一下 paper 元件和雙向綁定 Link Dynamic, two-way data binding 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
- 27. 武器庫
- 28. 人臉追蹤、聲音播放/辨識 trackingjs.js voices Web Component wrapper to the Web Speech API, that allows you to do voice recognition and speech synthesis using Polymer
- 29. GoogleSheets + Goole Map (改成雙向,有坑!) http://googlewebcomponents.github.io/google-sheets/components/google-sheets/demo.html
- 30. Step1 改成 bind model + draggable='true'
- 31. Step2 fix google-map updatePosition(...)
- 32. Resource ● Are We Componentized Yet? ● Data-binding Revolutions with Object.observe() ● HTML5 ROCKS ● Component Kitchen ● Custom Elements ● http://trackingjs.com/docs.html#web-components