基本结构（Polymer）

快速生成是输入： pe （ polymer elements ）

查询文件快捷键： ctrl+p

<dom-module id=” 文件名 ”>

<style>

// 样式

</style>

// 控件

</template>

// 业务逻辑

</script>

</dom-module>

生命周期

组件的几个生命周期回调函数

回调函数	描述
constructor	当一个元素被改善的时候（元素被创建，或者已创建的元素被定义）调用此函数
connectedCallback	当元素被添加到文档的时候调用此函数
disconnectedCallback	当元素被从文档删除的时候调用此函数
attributeChangedCallback	当元素的任一属性被修改，或者属性被追加，删除，替换的时候调用此函数

1. 写调用函数的函数体时，需要先调用父类的回调函数

2.constructor 只做初始化的准备，比如初始化状态、值、绑定事件，建立 shadowroot 之类的工作。其他工作应该推迟到 connectedCallback 里面做。 constructor 函数可能会被调用多次。

3.polymer 提供了一个 ready 方法，只有在元素第一次被加入文档的时候才会被调用。

代码如下：

ready(){

super.ready();

Polymer.RenderStatus.afterNextRender(this,function(){

// 操作

})

}

元素的四个内部状态，没法直接获得，但可以通过：状态名这样的伪类来获取

状态	描述
uncustomized	元素没有合法的名字（字母与连字符组合）
undefined	元素有合法的名字但是没有定义
custom	元素有合法的名字，已定义和改善
failed	试图改善元素时失败

自定义元素

总共有三种自定义元素：

元素名	描述
Hybird element	主要是为了兼容 Polymer 1.x 但 Gesture 只支持 Hybird elements 。
Legacy element	处于两者之间，没有看出
Class-based element	Polymer 2.0 最常用的自定义元素方式。

Class-based elements 方式

// 定义了一个 MyElement 类继承 polymer 的 Element 类

class MyElement extends Polymer.Element{

// 这个函数是必须写的，返回小写的标签名

static get is(){

return ‘my-element’;

}

// 定义属性

static get properties(){}

// 构造函数，可是可以被多次调用

constructor(){

super();

}

// 元素类可以定义回调函数

connectedCallback(){

super.connectedCallback();

}

// 也是初始化函数，只有元素第一次被添加到 dom 的时候才调用

ready(){

super.ready();

this.textContent = ‘I am a custom element!’;

}

// 通过一个元素名来联系新类

customElements.define(MyElement.is,MyElement);

// 通过 createElement 方法创建实例

var el1 = document.createElement(‘my-element’);

// 通过构造函数创建实例

var el2 = new MyElement();

}

Legacy element 方式

MyElement = Polymer({

is : ‘my-element’,

created:function (){

this.textContent = ‘My element!’;

}

});

Legacy 与 class-based 生命周期的命名转换

Legacy	Class-Based
created	constructor
ready	ready
attached	connectedCallback
detached	disconnectedCallback
attributeChanged	attributedChangedCallback

Hybird 的方式不做要求，如果需要了解，参考 Gesture Events

自定义属性

在 properties 里面定义

通过 type 来确定变量的数据类型，主要有 Boolean ， Date ， Number ， String ， Array 和 Object

Boolean 的值是 true 或者 false

Date ， Number 序列化要求符合格式

String 没有序列化的要求

Array 和 Object 序列化要求值的格式是 json 形式

重写属性序列化函数： _serializeValue(value) // 自定义数据类型

_serializeValue(value){

If(value instanceof MycustomType){

return value.toString();

}

return super._serializeValue(value);

}

通过 value 来设置变量的默认值：

如果一个属性的默认值是以 Array 或者 Object ，那么所有该元素的实例的默认值都共享一个变量。如果要使每个元素拥有一份完全独立的拷贝的话，需要在这个值外面包一个函数。

class XCustom extends Polymer.Element{

static get properties(){

return {

mode:{

type : String,

value : ’auto’

data:{

type : Object,

notify : true,

value : function(){ return {} ;}

}

Observers函数（一旦属性值改变就会触发）

Polymer 的数据系统是基于数据路径的，并不是实际的对象

因此 observers 函数函数观察到的变化指的是 Polymer 里面存在一个相关的路径指向这个数据的变化。因此，直接改变一个 object 、 array 等引用对象不会被观察到。

比如： this.address.street = ‘Elm Street’

这样的写法不会让 address 上的观察器捕捉到变化

使用 Polymer 提供的方法：

// 改变 object

this .set( 'address.street' , 'Half Moon Street' )

// 改变 array

this .set( 'users.3' ,{name: 'Hawking' }) // 在 users 数组第三个位置修改值

this .push( 'users' ,{name: 'Maturin' }) // 添加数据到 users 数组尾部

this .pop( 'users' ) // 删除 users 数组尾部的数据

this .unshift( 'users' ,{name: 'Martin' })// 添加数据在 users 数组开头

this .shift( 'users' ) // 删除 users 数组开头的数据

this .splice( 'users' , 3 , 2 ,{name: 'Hawking' }) // 删除 users 数组下标为 3 的 2 个数据然后在这个位置上插入 HawKing 值

// 批量更新

this .setProperties({item: 'Orange' , count: 12 }, true ) //setReadOnly:true 代表需要设置 ready-only 的属性

// 延迟统一更新

this .notifyPath( 'address.street' )

this .notifySplices( 'users' ) //only array

// 获得路径代表的属性值

var value = this .get( 'address.street' )

// 获得 users[2] 的值

var item = this .get([ 'users' , 2 ])

数据绑定逻辑

dom-repeat 遍历显示数组

array-selector 数组选择器

dom-if 条件显示

dom-bind 自动绑定

dom-repeat 需要绑定一个数组，遍历里面的元素，包括了下面两个属性

item 数组元素

index 元素下标

两种写法：

内部的：

….

</template>

外部的：

<dom-repeat>

</template>

</dom-repeat>

还需要在 script 进行数据绑定

添加以下代码：

注意事项

客制化界面笔记

控件 Style 配置：

@apply(--layout-vertical); // 表示垂直居中显示

@apply(--layout-flex); // 表示根据内容填充

[[ 变量名 ]] 控件没法改值，只读权限，看成常量

{{ 变量名 }} 控件可以改值，可读可写权限

各控件的用法：

用于发送 ajax 请求的控件

<things-ajax

id="test-ajax" // 控件名

method="GET" // 请求方式，用 restful 规格

resource-url="purchase_orders/:id/test" // 请求路径

last-response="{{testObj}}"> // 请求后的数据封装到这个变量当中，变量名任取

</things-ajax>

查询栏控件

<things-ajax

auto

method="GET"

resource-url="diy_services/ElidomSearchForm/query.json"

last-response="{{formFields}}">

</things-ajax>

<things-search-form

id="search-form"

class="flex"

form-fields="[[formFields]]" // 与上面的响应过来的变量要一致

action-url="diy_services/DynamicScreen/query.json"

page="{{page}}"

limit="{{limit}}"

last-response="{{lastResponse}}">

</things-search-form>

网格控件，显示表格数据用的

<things-resource-grid

id = "grid"

config = "[[gridConfig]]" // 配置

model = "[[gridModel]]" // 模型

columns = "[[gridColumns]]" // 列名

data = "[[items]]" // 数据

buttons = "[[buttons]]" // 按钮

selected-row-data = "{{rowData}}" // 选取一行时获取该行数据

</things-resource-grid>

Script 配置说明

Polymer 获取控件的方式

this.$. 控件名 this.$[‘ 控件名 ’]

// 业务操作

Polymer ({

is: 'purchase-order' , // 与 dom-module 标签的 id 一致

behaviors: [ // 配置行为

Things . ResourceMenuContentBehavior

properties: { // 定义变量

testObj: { // 变量名

type: Object // 数据类型

testUrl: {

type: String ,

value: 'purchase_orders/:id/test' // 变量默认值

rowData: {

type : Object ,

observer : 'rowDataSelected' // }

listeners : { // 绑定监听事件

'test-btn-tap' : 'onTestTap' ,

'test-ajax.things-ajax-request' : 'testAjaxRequest' ,

"test-ajax.things-ajax-response" : 'testAjaxResponse' ,

'resource-meta.things-ajax-request' : 'testAjaxRequest' ,

onTestTap : function (){ // 点击测试按钮时触发

if ( this . rowData && this . rowData . id ){ //this 指代的是 test 按钮

var testAjax = this . $ [ 'test-ajax' ];

testAjax . resourceId = this . rowData . id ;

testAjax . sync = true ;

var request = testAjax . generateRequest ();

console . log ( request );

console . log ( " 测试按钮结束 " );

}

testAjaxRequest : function ( event ){

console . log ( "*****request 请求 *****" );

console . log ( event );

testAjaxResponse : function ( event ) {

console . log ( "#####response 响应 ######" );

console . log ( event );

rowDataSelected : function ( rowData ){

console . log ( rowData );

}

});

</script>

实际开发笔记

js中调用things-ajax控件的请求用 generateRequest 方法
js中调用things-search-form控件的请求用 submitMyForm 方法
控件的小说明（以things-ajax控件为例子）

在控件源码中，属性和方法都是用小驼峰式

在应用界面， template 里面控件的属性名是去掉大写改成小写，并用 - 号隔开

在 script 里面调用控件的属性或者方法时，点的是控件源码的写法

常用控件必填属性

Behavior 里面继承 Things.ResourceMenuContentBehavior

things-ajax

<things-ajax

auto

id="resource-meta"

method="GET"

resource-url="[[menuMetaUrl]]"

last-response="{{metaData}}">

</things-ajax>

things-search-form

<things-search-form

id="search-form"

form-fields="[[searchFormFields]]"

action-url="[[resourceUrl]]"

last-response="{{defectCode}}">

</things-search-form>

things-resource-grid

<things-resource-grid

id="main-grid"

config="[[gridConfig]]"

model="[[gridModel]]"

columns="[[gridColumns]]"

data="[[defectCode.items]]"

grid-save-action="[[menuInfo.grid_save_url]]"

buttons="[[buttons]]"

enable-detail-column>

</things-resource-grid>

布局控件

Ploymer 开发笔记

基本结构（Polymer）

生命周期

自定义属性

Observers函数（一旦属性值改变就会触发）

数据绑定逻辑

注意事项

猜你喜欢