关于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就能看到下面的效果~
推荐文章
2021-01-20 18:23:14
2021-01-22 17:24:38
2021-01-25 17:06:11
2021-01-28 17:37:27
2021-02-01 17:32:55
2021-02-03 17:41:37
2021-02-05 17:23:07
2021-02-08 16:59:58
稳定
产品可用性高于99.9%贴心
全国7*24小时客服热线专业
产品经理在线技术支持快速
快速上线运营快承诺
我们选择声誉坚持
10年专注高端品质开发