Polymer的實例
2014-11-15 18:01:28
閱讀：857
首頁 資訊 技術分享
Polymer
關于Polymer的介紹我就不多說了，這里只簡單介紹一下。
Polymer是Google在2013年發布的Web UI庫，使用了很多HTML5的技術。 這里主要通過一個TODO例子來講解如何創建一個自己的Element。
首先，下載Polymer庫，我們通過bower來安裝Polymer
$ bower install polymer
安裝完成后我們先創建屬于自己的element
$ touch todo-element.html
使用文本編輯器，敲入下面的代碼
<link rel="import" href="bower_components/polymer/polymer.html"><polymer-element name="todo-element"><template>
<style>
ul li{
list-style: none;
}
a[on-click]{
cursor: pointer;
}
</style>
<input type="text" value="{{item}}">
<button on-click="{{addItem}}">add</button>
<ul>
<template repeat="{{item,itemIndex in list}}">
<li>
<input type="checkbox" value="{{item.checked}}">
<span>{{item.text}}</span>
<a data-index="{{itemIndex}}" on-click="{{removeItem}}">×</a>
</li>
</template>
</ul>
<button on-click="{{doArchive}}">archive</button></template><script>Polymer({
list: [],
addItem: function(){
this.list.push({
text: this.item,
checked: false
});
this.item = '';
},
removeItem: function(e, detail, sender){
var index = sender.attributes['data-index'].value;
this.list.splice(index,1);
},
doArchive: function(){
for(var i in this.list){
if(this.list[i].checked){
this.list.splice(i,1);
}
}
}});</script></polymer-element>
下面說明一些重要的點：
-
引用Polymer.html，這是創建Polymer元素的必要條件
-
使用< polymer-element > 創建新元素，通過name屬性聲明元素名稱
-
使用< template > 來封裝元素
-
使用 {{}} 來聲明雙向綁定的屬性
創建好指令后，我們就可以使用該指令了。 創建index.html
$ touch index.html
編輯該文件，引入我們創建的指令
<!DOCTYPE html><html> <head> <script src="bower_components/webcomponentsjs/webcomponents.js"></script> <link rel="import" href="todo-element.html"> </head> <body> <todo-element></todo-element> </body></html>
最后我們用web服務器來訪問index.html就能看到下面的效果~
?
穩定
產品高可用性高并發貼心
項目群及時溝通專業
產品經理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽堅持
10年專注高端品質開發