国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

開坑,寫點Polymer 1.0 教程第2篇(下)——hello world篇

xiangzhihong / 2954人閱讀

摘要:數據綁定是一個非常屌的的辦法能讓你快速的傳播組件的變化,減少代碼的行數。你可以用雙大括弧來聲明你需要綁定的屬性,大括弧在運行時會被替換成括弧內的屬性值。本篇完,下篇還沒想好要寫啥。

書接上回,上回叔說到如何注冊(創建)一個自定義組件,這回我們來講講它的數據綁定。

使用數據綁定

當然,你可能不會僅僅滿足上文教的簡單的靜態自定義組件,你通常需要動態的更新你的dom組件。

數據綁定是一個非常屌的的辦法能讓你快速的傳播組件的變化,減少代碼的行數。你可以用雙大括弧{{}}來聲明你需要綁定的屬性,大括弧在運行時會被替換成括弧內的屬性值。

name-tag.html





  

  
  

index.html



  
    
    
  
  
    
  

運行結果

聲明properties

我們可以看到owner這一變量已經和標簽綁定在一起了,但是這是在組件ready階段才給owner賦的值,下面會介紹另外一種定義綁定屬性的方式
定義——聲明properties屬性(如同聲明is屬性來定義自定義的組件的標簽名一樣)

properties是自定義組件公共api中非常重要的一個組成部分,你可以通過它來定義默認值,配置標簽上的屬性值,也可以用啦觀測屬性的變化等等

在接下去的例子中,我們將聲明一個帶有默認值的owner屬性,并將index.html中對這個屬性進行賦值操作

configurable-name-tag.html





  

  
  

index.html



  
    
    
  
  
    
    
    
  
雙向綁定

除了綁定文本(如上例, 變量 -> 組件)以外,Polymer還支持雙向綁定
(變量 -> 組件 -> 組件change -> 變量)

edit-element.html


    

    

index.html





    
    



    


運行結果

Polymer是通過事件名的約定來實現雙向綁定的(關于數據綁定以后會開一張自己講),但是原生標簽一開始并不在Polymer的生態圈內,所以沒有遵循這一約定,因此對于原生標簽,我們需要按照下面的格式來給它這是一個自定義的change事件聲明,格式如下

target-prop="{{hostProp::target-change-event}}"

舉個例子:
如果是對input type="text"的文本框進行雙向綁定,你就可以這樣寫


或者


::符號后的都是事件名,兩者區別是input事件每次按下鍵盤都會觸發雙向綁定的更新,而change事件只在光標失去焦點的時候觸發雙向綁定的更新。

本篇完,下篇還沒想好要寫啥。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86018.html

相關文章

  • 開坑寫點Polymer 1.0 教程2(上)——hello world

    摘要:書接上回,我們已經把運行的準備工作做好,接下來就敲點代碼來感受下它到底是個什么東東,這一篇里我基本會照搬官網的幾個例子來快速過一下。非常重要的一點是,這個組件的標簽名必須要以符號分割。 書接上回,我們已經把運行Polymer的準備工作做好,接下來就敲點代碼來感受下它到底是個什么東東,這一篇里我基本會照搬官網Quick tour的幾個例子來快速過一下。 注冊一個自定義組件 需要調用Pol...

    HitenDev 評論0 收藏0
  • 開坑寫點Polymer 1.0 教程1——安裝

    摘要:所以又以一個庫的身份出現在世人面前,它現階段要做的就是使用的規范來進行開發,并且提供了一套底層實現來填補了各大瀏覽器暫不支持的,我們稱為填充物也就是要干的事情。 書接上回上一篇我們介紹了神馬是Polymer,這一篇我們來做些正式編碼前的準備工作,順便也扯一扯Polymer的真面目 如何安裝Polymer 有兩種方式:第一種是bower安裝,不要問我bower是什么,不會bower的話,...

    Jeff 評論0 收藏0
  • 開坑寫點Polymer 1.0 教程3——組件注冊與創建

    摘要:我們修改下例子定義借口,構造時將重新賦值測試一下這種構造函數傳參的方式只適用于,的創建方式,而且它種方式不支持,原因你自己拍腦袋想想就懂了。 之前一篇算是帶大家大致領略了一下Polymer的風采。這篇我們稍微深入一丟丟,講下組件的注冊和創建。 創建自定義組件的幾種方式 這里我們使用Polymer函數注冊了一個自定義組件my-element // register an element ...

    joywek 評論0 收藏0
  • 開坑寫點Polymer 1.0 教程5——事件與消息機制

    摘要:而不寫,則監聽是加在整個組件之上的。組件的輸入就是屬性賦值,輸出則是事件的觸發。運行結果消息機制這里來聊聊組件化開發的消息機制,這個并不局限于或者應用,適用于所有的組件式開發技術。 這篇會講下組件內部的事件處理機制,以及組件和外界通訊的處理方式(父子通訊,兄弟通訊等) 組件內的事件處理機制 第一種,直接寫在標簽里,用on-eventName=eventHandler的方式 ...

    SHERlocked93 評論0 收藏0
  • 開坑寫點Polymer 1.0 教程4——組件的生命周期

    摘要:組件也一樣,從被創建,被解析,被賦初始化值,被添加到舞臺,被繪制,被布局,使用過程中被修改了值,被重繪,被重新布局,最終被父組件移除結束慘淡的一身等等,都可以稱為組件的生命周期。 這篇來談談polymer最核心的一塊,也可以說是web components技術最最核心的一塊內容 生命周期,大家在學習一些框架的時候最好都去了解一下它們的生命周期。 什么是生命周期 什么是生命周期?故名思議...

    Dionysus_go 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<