Polymer的實(shí)例
2014-11-15 18:01:28
閱讀：792
首頁 資訊 技術(shù)分享
Polymer
關(guān)于Polymer的介紹我就不多說了，這里只簡(jiǎn)單介紹一下。
Polymer是Google在2013年發(fā)布的Web UI庫，使用了很多HTML5的技術(shù)。 這里主要通過一個(gè)TODO例子來講解如何創(chuàng)建一個(gè)自己的Element。
首先，下載Polymer庫，我們通過bower來安裝Polymer
$ bower install polymer
安裝完成后我們先創(chuàng)建屬于自己的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>
下面說明一些重要的點(diǎn)：
-
引用Polymer.html，這是創(chuàng)建Polymer元素的必要條件
-
使用< polymer-element > 創(chuàng)建新元素，通過name屬性聲明元素名稱
-
使用< template > 來封裝元素
-
使用 {{}} 來聲明雙向綁定的屬性
創(chuàng)建好指令后，我們就可以使用該指令了。 創(chuàng)建index.html
$ touch index.html
編輯該文件，引入我們創(chuàng)建的指令
<!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服務(wù)器來訪問index.html就能看到下面的效果~
?
穩(wěn)定
產(chǎn)品高可用性高并發(fā)貼心
項(xiàng)目群及時(shí)溝通專業(yè)
產(chǎn)品經(jīng)理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽(yù)堅(jiān)持
10年專注高端品質(zhì)開發(fā)