資訊專欄INFORMATION COLUMN
摘要：數(shù)據(jù)綁定是一個(gè)非常屌的的辦法能讓你快速的傳播組件的變化，減少代碼的行數(shù)。你可以用雙大括弧來(lái)聲明你需要綁定的屬性，大括弧在運(yùn)行時(shí)會(huì)被替換成括弧內(nèi)的屬性值。本篇完，下篇還沒(méi)想好要寫啥。
書接上回，上回叔說(shuō)到如何注冊(cè)（創(chuàng)建）一個(gè)自定義組件，這回我們來(lái)講講它的數(shù)據(jù)綁定。
使用數(shù)據(jù)綁定當(dāng)然，你可能不會(huì)僅僅滿足上文教的簡(jiǎn)單的靜態(tài)自定義組件，你通常需要?jiǎng)討B(tài)的更新你的dom組件。
數(shù)據(jù)綁定是一個(gè)非常屌的的辦法能讓你快速的傳播組件的變化，減少代碼的行數(shù)。你可以用雙大括弧{{}}來(lái)聲明你需要綁定的屬性，大括弧在運(yùn)行時(shí)會(huì)被替換成括弧內(nèi)的屬性值。
name-tag.html
This is {{owner}}"s name-tag element.
index.html
運(yùn)行結(jié)果
我們可以看到owner這一變量已經(jīng)和標(biāo)簽綁定在一起了，但是這是在組件ready階段才給owner賦的值，下面會(huì)介紹另外一種定義綁定屬性的方式
定義——聲明properties屬性（如同聲明is屬性來(lái)定義自定義的組件的標(biāo)簽名一樣）
properties是自定義組件公共api中非常重要的一個(gè)組成部分，你可以通過(guò)它來(lái)定義默認(rèn)值，配置標(biāo)簽上的屬性值，也可以用啦觀測(cè)屬性的變化等等
在接下去的例子中，我們將聲明一個(gè)帶有默認(rèn)值的owner屬性，并將index.html中對(duì)這個(gè)屬性進(jìn)行賦值操作
configurable-name-tag.html
This is {{owner}}"s configurable-name-tag element.
index.html
雙向綁定
除了綁定文本（如上例， 變量 -> 組件）以外，Polymer還支持雙向綁定
（變量 -> 組件 -> 組件change -> 變量）
edit-element.html
This is a {{owner}}"s edit-element.
index.html
運(yùn)行結(jié)果
Polymer是通過(guò)事件名的約定來(lái)實(shí)現(xiàn)雙向綁定的（關(guān)于數(shù)據(jù)綁定以后會(huì)開(kāi)一張自己講），但是原生標(biāo)簽一開(kāi)始并不在Polymer的生態(tài)圈內(nèi)，所以沒(méi)有遵循這一約定，因此對(duì)于原生標(biāo)簽，我們需要按照下面的格式來(lái)給它這是一個(gè)自定義的change事件聲明，格式如下
target-prop="{{hostProp::target-change-event}}"
舉個(gè)例子：
如果是對(duì)input type="text"的文本框進(jìn)行雙向綁定，你就可以這樣寫
或者
::符號(hào)后的都是事件名，兩者區(qū)別是input事件每次按下鍵盤都會(huì)觸發(fā)雙向綁定的更新，而change事件只在光標(biāo)失去焦點(diǎn)的時(shí)候觸發(fā)雙向綁定的更新。
本篇完，下篇還沒(méi)想好要寫啥。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86018.html
摘要：書接上回，我們已經(jīng)把運(yùn)行的準(zhǔn)備工作做好，接下來(lái)就敲點(diǎn)代碼來(lái)感受下它到底是個(gè)什么東東，這一篇里我基本會(huì)照搬官網(wǎng)的幾個(gè)例子來(lái)快速過(guò)一下。非常重要的一點(diǎn)是，這個(gè)組件的標(biāo)簽名必須要以符號(hào)分割。 書接上回，我們已經(jīng)把運(yùn)行Polymer的準(zhǔn)備工作做好，接下來(lái)就敲點(diǎn)代碼來(lái)感受下它到底是個(gè)什么東東，這一篇里我基本會(huì)照搬官網(wǎng)Quick tour的幾個(gè)例子來(lái)快速過(guò)一下。 注冊(cè)一個(gè)自定義組件 需要調(diào)用Pol...
摘要：所以又以一個(gè)庫(kù)的身份出現(xiàn)在世人面前，它現(xiàn)階段要做的就是使用的規(guī)范來(lái)進(jìn)行開(kāi)發(fā)，并且提供了一套底層實(shí)現(xiàn)來(lái)填補(bǔ)了各大瀏覽器暫不支持的，我們稱為填充物也就是要干的事情。 書接上回上一篇我們介紹了神馬是Polymer，這一篇我們來(lái)做些正式編碼前的準(zhǔn)備工作，順便也扯一扯Polymer的真面目 如何安裝Polymer 有兩種方式：第一種是bower安裝，不要問(wèn)我bower是什么，不會(huì)bower的話，...
摘要：我們修改下例子定義借口，構(gòu)造時(shí)將重新賦值測(cè)試一下這種構(gòu)造函數(shù)傳參的方式只適用于，的創(chuàng)建方式，而且它種方式不支持，原因你自己拍腦袋想想就懂了。 之前一篇算是帶大家大致領(lǐng)略了一下Polymer的風(fēng)采。這篇我們稍微深入一丟丟，講下組件的注冊(cè)和創(chuàng)建。 創(chuàng)建自定義組件的幾種方式 這里我們使用Polymer函數(shù)注冊(cè)了一個(gè)自定義組件my-element // register an element ...
摘要：而不寫，則監(jiān)聽(tīng)是加在整個(gè)組件之上的。組件的輸入就是屬性賦值，輸出則是事件的觸發(fā)。運(yùn)行結(jié)果消息機(jī)制這里來(lái)聊聊組件化開(kāi)發(fā)的消息機(jī)制，這個(gè)并不局限于或者應(yīng)用，適用于所有的組件式開(kāi)發(fā)技術(shù)。 這篇會(huì)講下組件內(nèi)部的事件處理機(jī)制，以及組件和外界通訊的處理方式（父子通訊，兄弟通訊等） 組件內(nèi)的事件處理機(jī)制 第一種，直接寫在標(biāo)簽里，用on-eventName=eventHandler的方式 ...
摘要：組件也一樣，從被創(chuàng)建，被解析，被賦初始化值，被添加到舞臺(tái)，被繪制，被布局，使用過(guò)程中被修改了值，被重繪，被重新布局，最終被父組件移除結(jié)束慘淡的一身等等，都可以稱為組件的生命周期。 這篇來(lái)談?wù)刾olymer最核心的一塊，也可以說(shuō)是web components技術(shù)最最核心的一塊內(nèi)容 生命周期，大家在學(xué)習(xí)一些框架的時(shí)候最好都去了解一下它們的生命周期。 什么是生命周期 什么是生命周期？故名思議...
閱讀 2888·2021-11-24 09:39
閱讀 2612·2021-11-23 09:51
閱讀 2230·2021-11-17 09:33
閱讀 1853·2021-10-22 09:54
閱讀 1938·2021-08-16 11:00
閱讀 3531·2019-08-30 15:53
閱讀 1795·2019-08-30 13:19
閱讀 2967·2019-08-30 12:49
