ploymer

developer guide

接下来看声明属性

声明属性

声明属性时，可设定的参数

type:属性反序列化
value：[function(){}]，配置属性默认值
readonly
reflectToAttribute
默认为false，attribute转为property，firstName-->firstname, first-name-->firstName；
true时，相反，规则相同。
不明白property和attribute有什么区别？
在js中的叫property，在html中的叫attribute。property和attribute可以相互映射，也叫序列化与反序列化。
notify
computed
observer：function，property改变后，会调用此函数
observers：每个property需要设定默认值，函数会调用新值（函数内部用newValue表示新值）；也可以观察子属性；
观察所有的子属性：user.manager.*，函数内部有三个属性path，value，base。
看到：http://docs.polymerchina.org/1.0/docs/devguide/properties.html#array-observation

数组监听

users: {
  type: Array,
  value: function() {
    return [];
  }
} 

observers: [
  'usersChanged(users.*)'
],

usersChanged: function(changeRecord) {
  //会给监听函数传users.splices作为参数，记录了操作的细节。这些操作需要使用polymer提供的数组改变方法来执行
  if (changeRecord.path == 'users.splices') {
    // a user was added or removed
  } else {
    // an individual user or its sub-properties changed
    // check "changeRecord.path" to determine what changed
  }
}

　　

notify：true

property value改变，则会调用property-changed的事件处理程序

readonly

//为什么要加这个函数？
responseHandler: function(response) {
  this._setResponse(response);
}

　　

computed properties

//依赖的属性以改变，则会重新计算
//所有依赖的属性都被定义(!==undefined)了，才会调用计算函数。所以被依赖的函数要有初始值。
fullName: {
  type: String,
  computed: 'computeFullName(first, last)'
}

把property映射为attribute：property和attribute的值同步

response: {
  type: Object,
　//只需要设置这个属性
  reflectToAttribute: true
}

属性序列化：

property--attribute：property value需要进行序列化，与property type有关；

局部DOM

local DOM; light DOM（children）;browser通过shadow dom或者shady dom来创建local dom，默认是shady dom。

//id和is属性相同
//陈述部分
<dom-module id="x-foo">
  <template>I am x-foo!</template>
</dom-module>

<script>
  //命令部分
  Polymer({
    is: 'x-foo'
  });
</script>
//推荐把陈述和命令放在一个html中，和main file分开

节点的自动发现

<dom-module id="x-custom">
  <template>
    Hello World from <span id="name"></span>!
  </template>
</dom-module>

<script>

  Polymer({

    is: 'x-custom',

    ready: function() {
　　　 //通过this.$.{id}来找到静态节点
      this.$.name.textContent = this.name;
    }

  });

</script>

//动态节点
this.$$(selector)：只返回第一个

DOM分发

通过 <template>的<content>元素，把local dom和light dom结合起来，

DOM API

polymer提供自定义的API来操作local DOM和light DOM，这些API与原生的方法一样，只是会返回array，而不是nodelist。必须使用polymer提供的方法，而不能使用原生的方法

//使用append和insertBefore给polymer自定义的元素，增加子元素；自定义元素用this.root来表示
Polymer.dom(parent).appendChild(node)
Polymer.dom(parent).insertBefore(node, beforeNode)
Polymer.dom(parent).removeChild(node)
//使用dom.flush来执行以上操作
Polymer.dom.flush()

Parent and child APIs:
Polymer.dom(parent).childNodes
Polymer.dom(node).parentNode
Polymer.dom(node).firstChild
Polymer.dom(node).lastChild
Polymer.dom(node).firstElementChild
Polymer.dom(node).lastElementChild
Polymer.dom(node).previousSibling
Polymer.dom(node).nextSibling
Polymer.dom(node).textContent
Polymer.dom(node).innerHTML

Query selector:
Polymer.dom(parent).querySelector(selector)
Polymer.dom(parent).querySelectorAll(selector)

Content APIs:
Polymer.dom(contentElement).getDistributedNodes()
Polymer.dom(node).getDestinationInsertionPoints()

Node mutation APIs:
Polymer.dom(node).setAttribute(attribute, value)
Polymer.dom(node).removeAttribute(attribute)
Polymer.dom(node).classList

//使用以上API，可以保证shady dom能动态分发content元素；如果改变和类和属性，没有使用polymer API，则调用distributeContent强制更新分发。

这里提到的例子还没做

Events

事件监听器的设置

<dom-module id="x-custom">
  <template>
    <div>I will respond</div>
    <div>to a tap on</div>
    <div>any of my children!</div>
    //打算给它加事件，所以设置一个id
    <div id="special">I am special!</div>
　　 //与上一种方法相比，这种方式，不用给元素加id
　　 <div on-click='testClick'>on click</div>
  </template>
</dom-module>

<script>

  Polymer({

    is: 'x-custom',

    listeners: {
　　　 //给host element加tap事件
      'tap': 'regularTap',
　　　 //给id为special的元素加tap事件
      'special.tap': 'specialTap'
    },

    regularTap: function(e) {
      alert("Thank you for tapping");
    },

    specialTap: function(e) {
      alert("It was special tapping");
    },

　　testClick: function(e){
　　　　alert('on click');
　　}

  });

</script>

手势事件：先不看

事件重定向：有点麻烦，因为搞不懂哪几个dom

行为

看不懂

公共函数

所有的polymer元素继承自Polymer.Base，它实现了一些公共函数

$$(selector):返回 元素的local dom中第一个匹配的元素

toggleClass(name, boolean, [node]):boolean为true，给host元素加name的类；相反；如果node有值，则给node加，而不是给host元素加

toggleAttribute(name, boolean, [node]):

attributeFollows(name, newNode, oldNode):把一个boolean属性，从oldnode移到newnode，oldnode不设置，newnode设置

fire(type, [detail], [options]):触发一个自定义事件，options包括：node(默认为this)，bubbles(true)，cancelable(是否能被preventDefault取消，默认false)

全局设置

<html>
<head>
  <meta charset="utf-8">
  <script src="components/webcomponentsjs/webcomponents-lite.js"></script>
  <script>
  //在引入polymer库之前，进行设置
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
  </script>
  <!-- import a component that relies on Polymer -->
  <link rel="import" href="elements/my-app.html">
</head>
<body>

也可以通过url进行设置：http://myserver.com/test-app/index.html?dom=shadow

dom
shadow：局部dom使用影子dom，将来默认使用影子dom
shady：局部dom使用shady dom，现在默认使用shady dom

shady dom