PolymerJS 開發實戰
•
11 gostaram•2,648 visualizações
Web 開發元件化有其優勢與應用場景。PolymerJS 是 Google 打造支援 Web Compoent 標準的實作框架，雖然 AngularJS 有 directive 來提供元件開發與應用，但這點如果和 PolymerJS 比起來，PolymerJS 其實更為全面且出色。 今年 Google 2014 開發者大會推出 Material Design 後，PolymerJS 率先支援了 Material Design 元件組，筆者小小玩一下感覺很 high 啊
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (17)
Semelhante a PolymerJS 開發實戰
Semelhante a PolymerJS 開發實戰 (20)
Último
Último (20)
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