polymer是什么呢
一个能够协助你轻松建立一个自定义标签的库
应用polymer的一些特征 你能够建立自定义元夙来削减模板代码大小 也能够应用它异常简朴的建立庞杂交互元素
- 注册元素
- 生命周期回调
- 属性的视察
- local DOM模板
- 数据绑定
Register an element
运用Polymer函数注册一个新元素
polymer开辟页面就是html模块化
起首你须要一个元素html
proto-element.html
<link rel="import"
href="bower_components/polymer/polymer.html">
<script>
// register a new element called proto-element
Polymer({
is: "proto-element",
// add a callback to the element's prototype
ready: function() {
this.innerHTML = "I'm a proto-element. Check out my prototype!"
}
});
</script>
Polymer只要一个参数 用于定制元素tag-name properties methods
note: 自定义元素初始化完毕后挪用ready要领
在index.html中我们能够运用本身定义好的元素
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>
Polymer 是基于webcomponets组件建立机制的库 经由过程简朴的供应一些体式格局协助建立自定义元素 运用Polymer 最底层是webcomponents完成 中心是基本元素 包含Polymer和自定义基本元素 再上层时ui元素 页面在挪用ui元素
add local Dom
local dom就是自定义元素内部的一些dom节点 polymer设想目的就是语义化 比方我现在要一个相册标签 项目组没必要再一层一层套div 直接引入控件组的html库 能够只须要写
成如许
<lfx-gallery>
...
</lfx-gallery>
gallery.html中能够就要写成如许
<link rel="import"
href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="lfx-gallery">
<template>
<div>gallery caption</div>
<template is="dom-repeat" items="{{employees}}">
<img src="" alt="">
<p>gallery description!</p>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "lfx-gallery",
ready: function() {
this.employees = [
{first: 'Bob', last: 'Smith'},
{first: 'Sally', last: 'Johnson'},
{first: 'Aally', last: 'Sohnson'}
];
}
});
</script>
index.html如许写
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="lfx-gallery.html">
</head>
<body>
<lfx-gallery></lfx-gallery>
</body>
</html>
note: 自定义元素最好加本身的定名空间 以防和浏览器默许标签重名
Composition with local DOM
自定义元素内部节点是能够在外部掌握的，能够指定插进去自定义元素内部的位置
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="picture-frame">
<!-- scoped CSS for this element -->
<style>
div {
display: inline-block;
background-color: #ccc;
border-radius: 8px;
padding: 4px;
}
</style>
<template>
<div>
<!-- any children are rendered here -->
<content></content>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "picture-frame",
});
</script>
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="picture-frame.html">
</head>
<body>
<picture-frame>
<img src="images/p-logo.svg">
</picture-frame>
</body>
</html>
content标签安排外部自定义dom Polymer会把img放到content地区
plunker元素插进去标签内部
note: dom-module内部css款式不会影响到外部
Data binding
数据绑定能够使元素动态修正本身local dom，能够运用{{}}绑定属性
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="name-tag">
<template>
<!-- bind to the "owner" property -->
This is <b>{{owner}}</b>'s name-tag element.
</template>
</dom-module>
<script>
Polymer({
is: "name-tag",
ready: function() {
// set this element's owner property
this.owner = "Daniel";
}
});
</script>
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="name-tag.html">
</head>
<body>
<name-tag></name-tag>
</body>
</html>
Declare a property
在polymer函数中能够声明属性，每一个属性能够离别而设置本身的默许值，标记属性设置，属性视察者另有更多。
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="configurable-name-tag">
<template>
<!-- bind to the "owner" property -->
This is <b>{{owner}}</b>'s configurable-name-tag element.
</template>
<script>
Polymer({
is: "configurable-name-tag",
properties: {
// declare the owner property
owner: {
type: String,
value: "Daniel"
}
}
});
</script>
</dom-module>
双向数据绑定属性运用{{}}
Plunker属性声明地点
Bind to a property
polymer除了供应笔墨内容绑定，还供应元素属性绑定，一样也是双向数据绑定。
<link rel="import"
href="bower_components/polymer/polymer.html">
<!-- import the iron-input custom element -->
<link rel="import"
href="bower_components/iron-input/iron-input.html">
<dom-module id="editable-name-tag">
<template>
<p>
This is a <strong>{{owner}}</strong>'s editable-name-tag.
</p>
<!-- iron-input exposes a two-way bindable input value -->
<input is="iron-input" bind-value="{{owner}}"
placeholder="Your name here...">
</template>
<script>
Polymer({
is: "editable-name-tag",
properties: {
owner: {
type: String,
value: "Daniel"
}
}
});
</script>
</dom-module>
Plunker属性绑定地点
预计人人能够对polymer的速率有单心，不过从现在测下来速率是相称快的
polymer运用这些能够做些什么呢 写个timer
<link rel="import"
href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="lfx-timer">
<template>
<div>Seconds Elapsed: <b>{{secondsElapsed}}</b></div>
</template>
<script>
Polymer({
is: "lfx-timer",
properties: {
secondsElapsed: {
type: Number,
value: 0
}
},
setTimer: function() {
var self = this;
setInterval(function(){
self.secondsElapsed += 1;
}, 1000);
},
ready: function() {
this.setTimer();
}
});
</script>
</dom-module>
是否是和react彷佛 不过我们能够直接在index.html运用标签
而且能够直接当dom处置惩罚
Plunker计时器地点
我们再写一个todoapp
<link rel="import"
href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<link rel="import"
href="http://www.polymer-project.org/1.0/samples/components/iron-input/iron-input.html">
<dom-module id="lfx-todoapp">
<template>
<h3>TODO</h3>
<ul>
<template is="dom-repeat" items="{{todos}}">
<li>{{item}}</li>
</template>
</ul>
<p>你输入的是<b>{{input}}</b></p>
<input is="iron-input" bind-value="{{input}}"
placeholder="Your name here...">
<button type="button" on-click="handleClick">Add #<b>{{index}}</b></button>
</template>
<script>
Polymer({
is: "lfx-todoapp",
properties: {
index: {
type: Number,
value: 1
},
input: {
type: String,
value: ''
}
},
ready: function() {
this.todos = [
'sdsds'
];
},
handleClick: function(){
var self = this;
if(self.input != '') {
self.push('todos', self.input);
self.input = '';
}
}
});
</script>
</dom-module>
polymer供应repeat if等标签来处置惩罚数据
Plunker todoapp 地点
polymer能够做markdown编辑器
<link rel="import"
href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<!-- import the iron-input custom element -->
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<dom-module id="lfx-markdown">
<template>
<h3>INPUT</h3>
<textarea name="" id="textarea" on-keyup="keyupHandle" value="{{input}}"></textarea>
<h3>OUTPUT</h3>
<div id="output"></div>
</template>
<script>
Polymer({
is: "lfx-markdown",
properties: {
input: {
type: String,
value: '',
observer: 'inputChanged'
},
output: {
type: String,
value: ''
}
},
ready: function() {
var self = this;
self.input = 'Type some *markdown* here!';
},
keyupHandle: function(event) {
var self = this;
self.input = event.path ? event.path[0].value : event.target.value;
},
inputChanged: function(newvalue, oldvalue) {
var self = this;
self.$.output.innerHTML = marked(self.input);
}
});
</script>
</dom-module>
polymer经由过程object.observe或许dirty check完成数据视察
Plunker markdown 地点
