建立自訂 Umbraco 屬性編輯器並不複雜

TL:DR: https://github.com/filipbech/dayofweek

我喜歡新後台，作為一個內心的前端開發人員，我非常喜歡建立工具 TypeScript。所有這些都可以讓您的專案更具可擴展性並且使用起來更有趣。但是，有時候（很多時候）你並不需要全部。這是一個轉換 angularJS 屬性編輯器的範例。沒有 NPM，沒有 Vite，沒有 TypeScript，沒有建置管道！要查看我轉換的內容，這裡是

自從 Umbraco 的 angularJS 時代以來，JavaScript 已經有了很大的改進。在這個例子中，我使用了匯出、匯入（帶有匯入映射）、類別（帶有私有欄位）、HTTP 呼叫的獲取、模板文字和可選連結——所有這些都是我們當時只能夢想的東西……

簡單的屬性編輯器

屬性編輯器的核心是兩個檔案。 Umbraco 讀取 umbraco-package.json 檔案以了解在伺服器上執行哪些操作以及在客戶端載入哪些 JavaScript 檔案。然後是那個 JavaScript 檔案（在本例中稱為 day-of-week.js）。

您可以閱讀 umbraco-package.json 的文檔來尋找所有選項，但對此有一些評論。

第 23 行：它使用設定。與舊的 prevalues 類似，然後使用自身作為屬性編輯器來設定預設值（第 29 行）。
第 16 行：它將資料儲存為字串 (Umbraco.Plain.String) - 可以將值儲存為數字 - 這可能更正確:-D
第 35 行：它使用內聯本地化。你仍然可以像以前一樣選擇指向一個檔案（雖然它是 javascript 而不是 XML），但如果你只有幾個標籤，我喜歡直接把它們放在那裡

然後是帶有一些註解的 javascript 檔案

第 5 行：這都是我們匯出並給出自訂元素名稱的單一類別（第 48 行）
第 5 行：該類別擴展自我們上面導入的 UmbLitElement。我們這樣做是為了從 Umbraco（本例中的本地化部分）和 Lit（模板等）中獲得一些方便的方法。
第 6 行：在靜態欄位中定義屬性，這是我們告訴 Lit 哪些屬性應該是響應式的。
第 26 行：this.localize.term() 由於 UmbLitElement 而可用，並將翻譯鍵作為字串參數。
第 32 行：呼叫 this.requestUpdate() 是我們告訴 Lit 在更改視圖後重新渲染視圖的方式（有點像在 angularJS 時代調用 $scope.$apply() ）。
第 37 行：調度 UmbPropertyValueChangeEvent 是我們通知 Umbraco 有一個新值要儲存的方式。
第 41 行：render 方法是我們告訴 Lit 顯示什麼內容的方法。在此範例中，我們實際上只是將 displayList 解析為 Umbraco UI 庫中的元件並偵聽更改事件，該事件會更新本機值並通知 Umbraco。

就是這樣！請在此處查看此簡化程式碼：https://github.com/filipbech/dayofweek。 Eric、Tony 和真實套件背後的團隊已經超越了這一點，並添加了一些身份驗證等，因此請按照原始儲存庫在現實生活中看到它。

美好事物的開始

這種方法的優點在於簡單。透過利用現代 JavaScript 功能和新的後台實現，我們可以創建功能強大且可重複使用的屬性編輯器，而無需複雜的建置工具或框架。

我希望這能激勵您去體驗 Umbraco 後台。有一些新的語法需要學習，但除此之外，我認為啟動和運行概念證明就像「過去」一樣容易。

如果您有想法要分享，我很樂意聽取您的意見。讓我們繼續建立令人驚嘆的東西來擴展 CMS 的功能？

我在 BlueSky（以及大多數其他社交網站）上的身份是 filipbech - 請公開聯繫，以便每個人都可以從討論中學習！

以上是建立自訂 Umbraco 屬性編輯器並不複雜的詳細內容。更多資訊請關注PHP中文網其他相關文章！