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