构建自定义 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中文网其他相关文章！