HTML 僅具有可繫結引數的自定義元素

在下文中,我們將建立一個 Aurelia 自定義元素的示例,該元素允許你通過視訊 ID 顯示 Youtube 視訊。

Aurelia Custom Element 可以用兩種不同的方式定義:第一種是通過建立檢視模型和附帶檢視,第二種是通過建立基本 HTML 檔案並在檢視本身的 <template> 標籤上使用 bindable 屬性。

對於下面的示例,僅使用 HTML 的自定義元素是有意義的,因為我們只是在我們的應用程式中輕鬆使用 Youtube 嵌入程式碼。

示例: youtube.html

<template bindable="videoId">
<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>
</template>

僅 HTML 自定義元素的檔名將用作 HTML 中的標記名稱。因此,請確保你不要將其稱為 header.htmlfooter.html 或任何其他本地 HTML 元素名稱之類的通用名稱。

使用它:

<template>
    <require from="./youtube.html"></require>

    <youtube video-id="C9GTEsNf_GU"></youtube>
</template>