基於命名約定建立自定義元素

Created: November-22, 2018

基於命名約定在 Aurelia 中建立基本自定義元素，只需將字尾 CustomElement 新增到類的名稱即可。Aurelia 會自動刪除此字尾。類名的其餘部分將是小寫的，並使用連字元分隔，然後可以用作元素名稱。

示例： my-element.js

export class SuperCoolCustomElement {

}

<template>
    <h1>I am a custom element</h1>
</template>

使用它：

要使用新定義的自定義元素，首先需要從類名中檢索標記名稱。CustomElement 字尾將被剝離，其餘部分（SuperCool）將在每個大寫字母上以小寫字母小寫並用連字元分隔。因此，SuperCoolCustomElement 成為 super-cool 並形成我們元素的基礎。

<template>
    <require from="./my-element"></require>

    <super-cool></super-cool>
</template>

值得注意的是，我們上面的例子有點人為。我們可能剛剛建立了一個僅 HTML 的自定義元素，而根本沒有建立一個 viewmodel。但是，viewmodel 方法允許你提供可繫結屬性以使你的元素可配置（如其他示例所示）。