カスタム Umbraco プロパティエディターを構築するのは複雑である必要はありません-jsチュートリアル-php.cn

カスタム Umbraco プロパティエディターを構築するのは複雑である必要はありません

Barbara Streisand

リリース： 2025-01-15 21:10:44

オリジナル

784 人が閲覧しました

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

私は ~~新しい~~ バックオフィスが大好きで、フロントエンド開発者として心から、ビルドツールである TypeScript のファンです。プロジェクトをよりスケーラブルにし、楽しく作業できるようにするすべての要素。しかし、場合によっては (多くの場合)、そのすべてが必要ではありません。ここでは、angularJS プロパティエディターを変換する例を示します。 NPM、Vite、TypeScript、ビルドパイプラインはありません。私が変換したものを確認するには、<=13 バージョンをご覧ください: https://github.com/Frost117/UmbracoDayOfWeek/tree/v13.0.3

JavaScript は、Umbraco の angularJS の時代から大幅に改善されました。この例では、エクスポート、インポート (インポートマップを使用)、クラス (プライベートフィールドを使用)、HTTP 呼び出しのフェッチ、テンプレートリテラル、およびオプションのチェーンを使用しています。これらはすべて、当時は夢見ることしかできなかったものです…

シンプルなプロパティエディタ

中心となるプロパティエディタは 2 つのファイルです。 Umbraco がサーバー上で何を行うか、クライアントにどの JavaScript ファイルをロードするかを知るために読み取る umbraco-package.json ファイル。そして、その JavaScript ファイル (この例では、day-of-week.js と呼ばれます)。

umbraco-package.json のドキュメントを読んですべてのオプションを確認できますが、これについてはいくつかのコメントがあります。

It doesn’t have to be complicated to build a custom Umbraco property editor
23行目：設定を使用します。古い事前値と似ていますが、それ自体をプロパティエディタとして使用してデフォルト値を設定します (行 29)。
行 16: データを文字列 (Umbraco.Plain.String) として保存します - 値を数値として保存した可能性があります - それはより正しいかもしれません :-D
35 行目: インラインローカリゼーションを使用します。以前と同様にファイルを指定することもできますが (ただし、XML ではなく JavaScript です)、ラベルが数個しかない場合は、ラベルをそこに直接配置するのが好きです

そしていくつかのコメントを含む JavaScript ファイル

It doesn’t have to be complicated to build a custom Umbraco property editor
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、および実際のパッケージの背後にあるチームは、それを超えて認証などを追加しているため、実際のパッケージを確認するには、元のリポジトリに従ってください。