摘要:我們修改下例子定義借口,構造時將重新賦值測試一下這種構造函數傳參的方式只適用于,的創建方式,而且它種方式不支持,原因你自己拍腦袋想想就懂了。
之前一篇算是帶大家大致領略了一下Polymer的風采。這篇我們稍微深入一丟丟,講下組件的注冊和創建。
創建自定義組件的幾種方式這里我們使用Polymer函數注冊了一個自定義組件"my-element"
// register an element Polymer({ is: "my-element", created: function() { this.textContent = "My element!"; } });
在hello world篇中我們使用的是直接在html頁面里寫標簽的方式來創建這個自定義組件
但是如果my-element需要被動態創建,使用上面的方式顯然就滿足不了要求。所以Polymer提供了另外2種創建方式
第一種
var element = document.createElement("my-element");
啊,我們可以調用原生dom api一樣來創建自定義組件了,這是一件多么讓人愉悅的事情。
我們來測試一下
第二種
這種方式需要我們在注冊自定義組件的時候進行一點小的改動,調用Polymer函數定義的時候把返回值賦個一個全局變量MyElement
// register an element MyElement = Polymer({ is: "my-element", created: function() { this.textContent = "My element!"; } });
var el2 = new MyElement();
從這里可以得知Polymer函數會返回一個自定義組件的構造函數,使用new就可以創建它了。
我們來測試一下
對于這種方法,Polymer還提供了一個接口factoryImpl可以讓我們在創建自定義組件的時候傳入運行時的構造參數,而不是只能死死地使用注冊組件時候定義的內容。
我們修改下例子
{{helloMessage}}
測試一下
這種構造函數傳參的方式只適用于,new CustomElement的創建方式,而且它2種方式不支持,原因你自己拍腦袋想想就懂了。
factoryImpl 被調用的時機是在dom被創建,默認值被設置了以后,具體的我們會在生命周期篇里談。
擴展原生的html標簽首先告訴大家一個非常遺憾的消息,Polymer當前版本暫不支持擴展自己定義組件(既自己不能擴展自己,但是會在以后版本中支持大家請擦干凈鼻涕靜靜等待),目前只能擴展原生的html標簽如input, button等。Polymer提供了一個extends接口來實現擴展
my-input.html
如果使用的是dom api我們需要這樣來創建
var el1 = document.createElement("input", "my-input")
如果使用html標簽的方式,我們要這樣寫
竊以為,后面2種方式來創建一個組件是非常非常扯蛋的一件事情,使用者必須非常清楚組件的繼承關系,你說這還不扯蛋么?期望Polymer在后續版本的api中對于組件擴展這一塊內容,消滅以上兩種不靠譜的創建方式。
在html主文件里定義“自定義組件首先說下,只有在寫demo的時候,才會用到這種寫法。生產環境中,都是需要把組件寫在各自獨立的文件中。
Defining a Polymer Element from the Main Document Hi! I"m a Polymer element that was defined in the main document!
HTMLImports.whenReady()這個方法你可以把它理解成JQ里的document.ready()或者AMD里的domReady(),可以確保引用的組件dom都被加載完了再進行下一步的調用,一般都是用在index.html也就是程序的入口處。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86043.html
摘要:數據綁定是一個非常屌的的辦法能讓你快速的傳播組件的變化,減少代碼的行數。你可以用雙大括弧來聲明你需要綁定的屬性,大括弧在運行時會被替換成括弧內的屬性值。本篇完,下篇還沒想好要寫啥。 書接上回,上回叔說到如何注冊(創建)一個自定義組件,這回我們來講講它的數據綁定。 使用數據綁定 當然,你可能不會僅僅滿足上文教的簡單的靜態自定義組件,你通常需要動態的更新你的dom組件。 數據綁定是一個非常...
摘要:書接上回,我們已經把運行的準備工作做好,接下來就敲點代碼來感受下它到底是個什么東東,這一篇里我基本會照搬官網的幾個例子來快速過一下。非常重要的一點是,這個組件的標簽名必須要以符號分割。 書接上回,我們已經把運行Polymer的準備工作做好,接下來就敲點代碼來感受下它到底是個什么東東,這一篇里我基本會照搬官網Quick tour的幾個例子來快速過一下。 注冊一個自定義組件 需要調用Pol...
摘要:而不寫,則監聽是加在整個組件之上的。組件的輸入就是屬性賦值,輸出則是事件的觸發。運行結果消息機制這里來聊聊組件化開發的消息機制,這個并不局限于或者應用,適用于所有的組件式開發技術。 這篇會講下組件內部的事件處理機制,以及組件和外界通訊的處理方式(父子通訊,兄弟通訊等) 組件內的事件處理機制 第一種,直接寫在標簽里,用on-eventName=eventHandler的方式 ...
摘要:組件也一樣,從被創建,被解析,被賦初始化值,被添加到舞臺,被繪制,被布局,使用過程中被修改了值,被重繪,被重新布局,最終被父組件移除結束慘淡的一身等等,都可以稱為組件的生命周期。 這篇來談談polymer最核心的一塊,也可以說是web components技術最最核心的一塊內容 生命周期,大家在學習一些框架的時候最好都去了解一下它們的生命周期。 什么是生命周期 什么是生命周期?故名思議...
摘要:所以又以一個庫的身份出現在世人面前,它現階段要做的就是使用的規范來進行開發,并且提供了一套底層實現來填補了各大瀏覽器暫不支持的,我們稱為填充物也就是要干的事情。 書接上回上一篇我們介紹了神馬是Polymer,這一篇我們來做些正式編碼前的準備工作,順便也扯一扯Polymer的真面目 如何安裝Polymer 有兩種方式:第一種是bower安裝,不要問我bower是什么,不會bower的話,...
閱讀 3708·2023-04-26 00:56
閱讀 2686·2021-09-30 10:01
閱讀 961·2021-09-22 15:30
閱讀 3915·2021-09-07 10:21
閱讀 1507·2021-09-02 15:40
閱讀 2750·2021-08-30 09:47
閱讀 1234·2021-08-16 10:57
閱讀 1862·2019-08-30 14:01