polymer-quick tour of polymer
注册一个元素
<link rel="import"
href="bower_components/polymer/polymer.html">
//没有添加<dom-module>
<script>
Polymer({
is:'proto-element',
ready:function(){
this.innerHTML='sfp';
}
})
</script>
增加本地元素：在<template>中
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="dom-element">
<template>
<p>I'm a DOM element. This is my local DOM!</p>
</template>
</dom-module>
<script>
Polymer({
is: "dom-element",
});
</script>
本地元素布局：在main中
<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>
<image src="images/p-logo.svg">
</picture-frame>
</body>
</html>
数据绑定：在Polymer()中定义数据，在<template>中显示
<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>
声明properties：看起来跟数据绑定功能类似，其实是要序列化为attribute；声明attribute，用hostAttributes
<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>
</dom-module>
<script>
Polymer({
is: "configurable-name-tag",
properties: {
// declare the owner property
owner: {
type: String,
value: "Daniel"
}
}
});
</script>
绑定properties:把定义的值传给属性
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id='proto-element'>
<style>
div{
width:100px;
height:100px;
background-color:olive;
}
</style>
<template>
<div>
<p id='{{owner}}'>local dom</p>
<content></content>
</div>
</template>
</dom-module>
<script>
Polymer({
is:'proto-element',
properties:{
owner:{
type:String,
value:'bind properties'
}
}
})
</script>
绑定数据和ready:声明了一个属性owner，default value：'wj', ready 之后改为'sfp'
<link rel="import"
href="bower_components/polymer/polymer.html">
<!-- 需要加一个id，value为proto-element -->
<dom-module id='proto-element'>
<template>
//增加本地元素
<p>this is a local dom</p>
<p><strong>{{owner}}</strong> test data binding</p>
</template>
</dom-module>
<script>
Polymer({
is: "proto-element",
ready: function() {
this.owner='sfp';
},
properties:{
owner:{
type:String,
value:'wj'
}
}
});
</script>
