擴展html aurelia.io方法

鑰匙要點

現代JavaScript框架Aurelia.io，允許開發人員在HTML中創建自定義元素和屬性，從而增強了Web應用程序的靈活性和功能。 Aurelia.io中的自定義屬性可用於包裝現有插件，提供常見綁定的快捷方式或更改現有的HTML元素，而無需直接代碼訪問。這使得在現有元素中添加新功能變得更加容易。
在Aurelia.io中創建新元素涉及為元素定義一個類，並為其HTML表示形式定義一個視圖。這使創建具有自定義行為和結構的全新元素，改進代碼重複使用和模塊化設計。
• >教老狗HTML新技巧是當今現代JavaScript框架的主要重點。無論是遵循諸如WebComponents之類的潛在標準，創建自定義指令還是擴展現有類，您的選擇框架很可能會提供一種擴展HTML標記本身的方法。在上一篇由布拉德·巴羅（Brad Barrow）撰寫的文章中，您被介紹給了一個新玩家：Aurelia。本文將基於Brad的文章和代碼，並向您展示如何通過遵循Aurelia的慣例來創建自定義元素以及自定義屬性。
>
• >本文的完整代碼可以在我們的github repo上找到，您可以在此處看到我們要在此構建的內容（請花一些時間以使應用程序初始化）。
為什麼需要更多標記？

> 在直接跳入操作之前，讓我們首先了解創建新組件的潛在用例。為此，我們將以概念性查看介紹性示例，如下圖所示。我們有兩頁，以ViewModel（VM）為代表，並顯示了有趣的圖片和GIF視頻。每個都有一個重複的列表，該列表本身呈現包含圖像和文本塊的帖子。

通過查看視圖，我們可以看到數據採集以及渲染與一個VM/視圖對緊密耦合。

>這可能不是一個簡單的示例，但隨著系統的增長和越來越多的要求，可能會變成主要缺點。

>

使用自定義屬性增強現有元素

想像一下，我們得到了為每個有趣的頁面帖子提供彈出窗口的請求。為此，我們可以通過放置必要的數據屬性，然後在我們的Funnyvm內部進行初始化，從而輕鬆地將Bootstrap的功能直接連接到標記中。但是，如果我們也需要在另一頁上突然進行操作怎麼辦？通過聲明自定義屬性來提供功能可以使我們的生活更加輕鬆。這些在以下方案中特別有用：

• >包裝現有插件
• >用於常見綁定的快捷方式，例如樣式或類
• 更改現有的HTML元素 /自定義元素，而無需直接代碼訪問

>現在讓我們弄髒雙手，看看構建我們的第一個自定義屬性所需的內容。

創建彈出

>讓我們從頭開始看看我們要實現的目標。新屬性彈出案應接受彈出窗口的位置，標題和內容的參數。放置位於右側，因此一個簡單的字符串，因為值就足夠了。對於其他兩個屬性，我們將使用Aurelia的數據綁定來映射迭代值。為了加載文件，我們使用Aurelia的需求功能。來自屬性包含要導入資源的相對路徑。

<span><span><span>&lt;template</span>&gt;</span>
</span>  <span><span><span>&lt;ul</span> class<span>="list-group"</span>&gt;</span>
</span>    <span><span><span>&lt;li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>&gt;</span>
</span>      <span><span><span>&lt;img</span> src.bind<span>="p.data.thumbnail"</span> /&gt;</span>
</span>      <span><span><span>&lt;a</span> href<span>="http://reddit.com${p.data.permalink}"</span>&gt;</span>
</span>        ${p.data.title}
      <span><span><span>&lt;/a</span>&gt;</span>
</span>    <span><span><span>&lt;/li</span>&gt;</span>
</span>  <span><span><span>&lt;/ul</span>&gt;</span>
</span><span><span><span>&lt;/template</span>&gt;</span></span>

為了實現這一目標，我們首先創建一個名為popover.js的src文件夾中的新JavaScript文件。與所有其他Aurelia結構一樣，自定義屬性是一個簡單的導出ES6類，而不是傳遞到預定義API的功能集合（就像許多舊版框架一樣）。

與其他框架相比，Aurelia通過通過元數據描述了構建體。但是，Aurelia不使用靜態功能或複雜的API，而是利用了前沿ES7裝飾器來實現這一目標。我們將從Aurelia-Framework包裝中導入必要的裝飾器。至於控件本身，我們將使用Twitter Bootstrap提供的彈出式JavaScript控件。因此，我們導入jQuery hander $和Bootstrap，以便初始化引導程序的JavaScript代碼。

<span><span><span>&lt;require</span> from<span>="./popover"</span>&gt;</span><span><span>&lt;/require</span>&gt;</span>    
</span>...
<span><span><span>&lt;img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /&gt;</span></span>

>下一步是應用前面提到的元數據，以便Aurelia知道加載文件時會得到什麼。通過連接自定義裝飾器，我們將組件命名為給定值。另一方面，可約束的裝飾器正在宣布我們認為可以綁定的屬性。我們只需為每個可用屬性重複此裝飾器即可。

>第一個注入裝飾器會處理實際的DOM元素作為我們構造方法的參數，然後存儲以供以後使用。

<span><span><span>&lt;template</span>&gt;</span>
</span>  <span><span><span>&lt;ul</span> class<span>="list-group"</span>&gt;</span>
</span>    <span><span><span>&lt;li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>&gt;</span>
</span>      <span><span><span>&lt;img</span> src.bind<span>="p.data.thumbnail"</span> /&gt;</span>
</span>      <span><span><span>&lt;a</span> href<span>="http://reddit.com${p.data.permalink}"</span>&gt;</span>
</span>        ${p.data.title}
      <span><span><span>&lt;/a</span>&gt;</span>
</span>    <span><span><span>&lt;/li</span>&gt;</span>
</span>  <span><span><span>&lt;/ul</span>&gt;</span>
</span><span><span><span>&lt;/template</span>&gt;</span></span>

現在，我們擁有所有必要的信息，我們可以通過聲明一種稱為bind的方法來選擇行為生命週期。這可以確保我們在適當的時機下初始化組件，與JQuery的Ready方法相當。

最後但並非最不重要的一點是，我們添加了更改的處理程序。請注意，在我們的示例中，這些實際上並未執行，因為綁定源不會隨著時間的流逝而變化。

<span><span><span>&lt;require</span> from<span>="./popover"</span>&gt;</span><span><span>&lt;/require</span>&gt;</span>    
</span>...
<span><span><span>&lt;img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /&gt;</span></span>

在github上查看完整的文件

<span>import <span>{customAttribute, bindable, inject}</span> from 'aurelia-framework';
</span><span>import $ from 'bootstrap';
</span><span>import bootstrap from 'bootstrap';
</span><span>...</span>

>現在我們已經看到瞭如何通過向現有元素提供屬性來添加新功能，讓我們繼續並開始編寫自己的自定義元素。

>

>創建具有自定義元素的新標籤

為了創建全新的元素，Aurelia利用了一種非常相似的方法來定制屬性。例如，我們將重新構建GIF頁面的帖子，該帖子由稱為Reddit-GIF的自定義元素表示，並提供了打開實際視頻的可能性。我們認為的結果標記應該是：

>

您可以看到，我們使用了新標籤，並通過數據綁定到數據屬性提供必要的信息。 >

>下一步是創建實際元素。我們通過在文件夾SRC中創建元素的視圖Reddit-gif.html及其VM Reddit-gif.js來做到這一點。接下來看到的視圖是利用gifs.html的先前標記，並添加一個按鈕，該按鈕可以切換用於嵌入實際視頻的iframe。同樣，Aurelia的觀點包裹在模板標籤中：

@<span>inject(Element)
</span>@<span>customAttribute('popover')
</span>@<span>bindable('title')
</span>@<span>bindable('content')
</span>@<span>bindable('placement')
</span><span>export class Popover {
</span><span>...</span>

>查看VM部分，我們確實遵循與創建自定義屬性時相似的過程。但是這一次，我們利用了一個不同的裝飾儀，該裝飾器將告訴Aurelia我們將僅使用一個名為Data的屬性來創建一個自定義元素。

。

<span>constructor(element) {
</span>  <span>this.element = element;
</span><span>}</span>

接下來，我們將定義一個gifactive成員，以跟踪是否應顯示iframe。我們最初還將GIFSRC成員設置為空，以便在Iframe不可見的情況下不要預先加載任何內容。

<span>bind() {
</span>  <span>// initialize the popover
</span>  <span>$(this.element).popover({ 
</span>    <span>title: this.title,
</span>    <span>placement: this.placement,
</span>    <span>content: this.content,
</span>    <span>trigger: 'hover' });
</span><span>}</span>

最後但並非最不重要的一點是，我們添加了由切換按鈕使用的toggleGif函數，該函數會在每個調用上翻轉可見性和源。

<span>titleChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.title = newValue;
</span><span>}
</span>
<span>contentChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.content = newValue;
</span><span>}
</span>
<span>placementChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.placement = newValue;
</span><span>}</span>

>您可以在此處查看完整的HTML文件，並在此處查看JS文件

用約定的代碼數量

降低代碼量 Aurelia

<span><span><span>&lt;require</span> from<span>="./reddit-gif"</span>&gt;</span><span><span>&lt;/require</span>&gt;</span>
</span>...
<span><span><span>&lt;ul</span> class<span>="list-group"</span>&gt;</span>
</span>    <span><span><span>&lt;li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>&gt;</span>
</span>      <span><span><span>&lt;reddit-gif</span> data.bind<span>="p.data"</span>&gt;</span><span><span>&lt;/reddit-gif</span>&gt;</span>
</span>    <span><span><span>&lt;/li</span>&gt;</span>
</span><span><span><span>&lt;/ul</span>&gt;</span></span>

就是要使開發人員的體驗盡可能愉快。讓我們面對事實：我們許多人不喜歡打字很多。因此，為了節省一些有價值的擊鍵並隨著時間的推移改善維護，Aurelia使用一組簡單的約定。例如，可綁定的裝飾器的完整版本實際上可能看起來像這樣，我們僅通過提供屬性名稱就可以使用它。所有其他選項將自動推斷。

>

<span><span><span>&lt;template</span>&gt;</span>
</span>  <span><span><span>&lt;ul</span> class<span>="list-group"</span>&gt;</span>
</span>    <span><span><span>&lt;li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>&gt;</span>
</span>      <span><span><span>&lt;img</span> src.bind<span>="p.data.thumbnail"</span> /&gt;</span>
</span>      <span><span><span>&lt;a</span> href<span>="http://reddit.com${p.data.permalink}"</span>&gt;</span>
</span>        ${p.data.title}
      <span><span><span>&lt;/a</span>&gt;</span>
</span>    <span><span><span>&lt;/li</span>&gt;</span>
</span>  <span><span><span>&lt;/ul</span>&gt;</span>
</span><span><span><span>&lt;/template</span>&gt;</span></span>

>要查看的另一件事是如何縮短對多個屬性的使用。因此，我們還可以告訴我們的自定義屬性可以期望動態屬性。為此，我們使用Dynamicoptions Decorator裝飾班級。現在，我們仍然可以重複使用相同的視圖標記，但不必手動定義所有屬性聲明，顧名思義，這些聲明在動態上下文中非常有幫助。這意味著我們可以編寫一個名為dynamicpropertychanged的通用更換手，每當任何綁定屬性更改時都會被調用。

<span><span><span>&lt;require</span> from<span>="./popover"</span>&gt;</span><span><span>&lt;/require</span>&gt;</span>    
</span>...
<span><span><span>&lt;img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /&gt;</span></span>

但是自定義元素呢？好吧，我們已經暗中使用了一些慣例，甚至沒有意識到。系統將自動將視圖和VM對匯總在一起，而它們的名稱相同。如果您需要使用其他視圖，則可以使用Decorator @UseView（相對路徑）。或者可能根本不使用視圖來聲明@noview。我們甚至可以發瘋，讓我們的觀點通過添加裝飾器Useshadowdom在陰影中呈現。如果您不熟悉該術語，請看一下這篇文章

結論

我們是Aurelia團隊，希望您能為您提供如何通過利用自定義元素和屬性來擴展HTML本身的快速概述。在整個示例中，我們希望您能夠通過為您提供一種靈活而易於使用的框架來看到我們對開發人員體驗的關注，而框架不會阻礙您阻礙或使您使用奇怪的API。如果您有任何疑問，我們想邀請您加入我們的Gitter頻道。當您編寫您的第一個自定義元素和屬性時，我們也很想听聽您的經歷。

>

經常詢問的問題（常見問題解答）有關使用Aurelia.io

擴展HTML

什麼是aurelia.io，它如何擴展html？

aurelia.io是一個現代化的開源JavaScript框架，用於網絡，移動設備和桌面開發。它通過允許開發人員創建自定義的HTML元素，將自定義屬性添加到現有的HTML元素並控制HTML渲染的流程來擴展HTML。這是通過Aurelia功能強大的模板引擎來實現的，該引擎可以解釋自定義元素和屬性，並將其作為標準HTML。這允許在維護乾淨，可讀的代碼的同時提供更動態，交互式和復雜的Web應用程序。

aurelia.io與其他JavaScript框架相比如何？

aurelia.io由於關注Web標準，簡單性和可擴展性而在其他JavaScript框架中脫穎而出。與許多框架不同，Aurelia.io被設計為合作庫的集合，這意味著您可以根據需要使用盡可能多或少的框架。它還強調了基於常規的編碼，減少了所需的樣板代碼量。此外，Aurelia.io對遵循Web標準的承諾意味著您的代碼將在未來和即將到來的Web Technologies中兼容。

>我如何在aurelia.io？

中創建自定義元素？ aurelia.io中的自定義元素涉及為元素定義一個類，以及其HTML表示的視圖。該類包含該元素的邏輯，而視圖定義了其HTML結構。定義後，可以像標準HTML元素一樣在任何Aurelia.io應用程序中使用自定義元素。這允許代碼重複使用和模塊化設計，使您的應用程序更易於開發和維護。

> aurelia.io中的自定義屬性是什麼，我如何使用它們？ IO是將自定義行為添加到現有HTML元素中的一種方法。它們以類似於自定義元素的方式定義，其中屬性邏輯的​​類和其HTML表示的視圖。定義後，可以將自定義屬性添加到aurelia.io應用程序中的任何HTML元素，擴展其功能而無需創建一個全新的元素。

>

> aurelia.io如何處理數據綁定？

aurelia.io支持雙向數據綁定，這意味著模型的變化自動更新視圖，反之亦然。這是通過Aurelia.io的可觀察性系統來實現的，該系統跟踪數據的變化並更新視圖的相關部分。這使得創建動態的，交互式應用程序變得容易，在其中UI始終反映了數據的當前狀態。

>

>我可以將Aurelia.io與其他JavaScript庫和框架一起使用嗎？ .IO被設計為與其他JavaScript庫和框架兼容。它使用模塊化體系結構，這意味著您可以選擇使用框架的哪些部分。這使得將Aurelia.io集成到現有項目中變得容易，或將其他庫和框架與Aurelia.io。包括一個強大的路由器，允許複雜的導航方案。路由器支持嵌套路由，可選參數和動態路由等功能。這使得使用aurelia.io創建單頁應用程序變得容易，在該應用程序中，用戶可以在不同的視圖之間導航而無需刷新頁面。

> aurelia.io？

aurelia.io的學習曲線是什麼，旨在易於學習，重點是簡單性和慣例而不是配置。如果您熟悉JavaScript和HTML，則應該能夠快速購買Aurelia.io。該框架的文檔是全面的，包含大量示例可以幫助您入門。

> Aurelia.io如何測試？它的性能是什麼樣的？

aurelia.io。可靠性和性能。它結合了單元測試，集成測試和端到端測試，以涵蓋框架的各個方面。在性能方面，Aurelia.io的設計為快速有效，具有最小的足跡和優化的渲染。

>

> aurelia.io有哪種支持和社區？ IO擁有一個充滿活力的開發人員社區，他們為框架做出了貢獻並相互支持。有許多可用的資源，包括社區論壇，吉特聊天室和堆棧溢出標籤。此外，Aurelia.io團隊還提供專業的支持和培訓服務。

以上是擴展html aurelia.io方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！