書接上回,上回叔說到如何註冊(建立)一個自定義組件,這回咱們來說講它的數據綁定。html
固然,你可能不會僅僅知足上文教的簡單的靜態自定義組件,你一般須要動態的更新你的dom組件。web
數據綁定是一個很是屌的的辦法能讓你快速的傳播組件的變化,減小代碼的行數。你能夠用雙大括弧{{}}來聲明你須要綁定的屬性,大括弧在運行時會被替換成括弧內的屬性值。segmentfault
name-tag.htmlapi
<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> <script> Polymer({ is: "name-tag", ready: function() { // set this element's owner property this.owner = "Daniel"; } }); </script> </dom-module>
index.htmldom
<!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>
運行結果this
咱們能夠看到owner這一變量已經和<b/>標籤綁定在一塊兒了,可是這是在組件ready階段纔給owner賦的值,下面會介紹另一種定義綁定屬性的方式
定義——聲明properties屬性(如同聲明is屬性來定義自定義的組件的標籤名同樣)spa
properties是自定義組件公共api中很是重要的一個組成部分,你能夠經過它來定義默認值,配置標籤上的屬性值,也能夠用啦觀測屬性的變化等等雙向綁定
在接下去的例子中,咱們將聲明一個帶有默認值的owner屬性,並將index.html中對這個屬性進行賦值操做code
configurable-name-tag.htmlcomponent
<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>
index.html
<!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="configurable-name-tag.html"> </head> <body> <!-- configure a property from markup by setting the corresponding attribute --> <configurable-name-tag owner="Scott"></configurable-name-tag> <!--在這裏咱們隊owner進行了賦值,就像操做input的value同樣對其進行賦值--> </body> </html>
除了綁定文本(如上例, 變量 -> 組件)之外,Polymer還支持雙向綁定
(變量 -> 組件 -> 組件change -> 變量)
edit-element.html
<dom-module id="edit-element"> <template> <p> This is a <strong>{{owner}}</strong>'s edit-element. </p> <input value="{{owner::input}}" placeholder="Your name here..."> </template> <script> Polymer({ is: "edit-element", properties: { owner: { type: String, value: "Daniel" } } }); </script> </dom-module>
index.html
<!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="edit-element.html"> </head> <body> <edit-element></edit-element> </body> </html>
運行結果
Polymer是經過事件名的約定來實現雙向綁定的(關於數據綁定之後會開一張本身講),可是原生標籤一開始並不在Polymer的生態圈內,因此沒有遵循這一約定,所以對於原生標籤,咱們須要按照下面的格式來給它這是一個自定義的change事件聲明,格式以下
target-prop="{{hostProp::target-change-event}}"
舉個例子:
若是是對input type="text"的文本框進行雙向綁定,你就能夠這樣寫
<input type="text" value="{{owner::input}}"
或者
<input type="text" value="{{owner::change}}"
::符號後的都是事件名,二者區別是input事件每次按下鍵盤都會觸發雙向綁定的更新,而change事件只在光標失去焦點的時候觸發雙向綁定的更新。
本篇完,下篇還沒想好要寫啥。