Ia tidak perlu rumit untuk membina editor harta Umbraco tersuai

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

Saya sukakan baharu pejabat belakang, dan sebagai pembangun bahagian hadapan, saya sangat peminat alat binaan, TypeScript. Semua perkara yang menjadikan projek anda lebih berskala dan menyeronokkan untuk diusahakan. TETAPI, kadang-kadang (berkali-kali) anda tidak memerlukan semuanya. Jadi inilah contoh menukar editor sifat angularJS. Tiada NPM, tiada Vite, tiada TypeScript, tiada saluran paip binaan! Untuk melihat perkara yang saya tukar, berikut ialah <=13 versi: https://github.com/Frost117/UmbracoDayOfWeek/tree/v13.0.3

JavaScript telah banyak bertambah baik sejak zaman angularJS Umbraco. Dalam contoh ini saya menggunakan eksport, import (dengan peta import), kelas (dengan medan peribadi), ambil untuk panggilan HTTP, huruf templat dan rantaian pilihan - semua perkara yang hanya boleh kita impikan pada zaman itu…

Editor Harta Mudah

Editor Harta pada teras ialah dua fail. Fail umbraco-package.json yang Umbraco baca untuk mengetahui perkara yang perlu dilakukan pada pelayan dan fail JavaScript yang hendak dimuatkan dalam klien. Dan kemudian fail JavaScript itu (dalam contoh ini dipanggil day-of-week.js).

Anda boleh membaca dokumentasi untuk umbraco-package.json untuk mengetahui semua pilihan, tetapi beberapa ulasan tentang yang ini.

Baris 23: Ia menggunakan tetapan. Serupa dengan pranilai lama, dan kemudian menggunakan dirinya sebagai editor harta untuk menetapkan nilai lalai (Baris 29).
Baris 16: Ia menyimpan data sebagai rentetan (Umbraco.Plain.String) - Boleh menyimpan nilai sebagai nombor - yang mungkin lebih betul :-D
Baris 35: Ia menggunakan penyetempatan sebaris. Anda masih boleh memilih untuk menunjuk ke fail seperti sebelum ini (iaitu javascript dan bukannya XML), tetapi jika anda hanya mempunyai beberapa label, saya suka meletakkannya terus di situ

Dan kemudian fail javascript dengan beberapa ulasan

Baris 5: semuanya adalah kelas tunggal yang kami eksport dan berikan nama elemen tersuai (Baris 48)
Baris 5: kelas dilanjutkan dari UmbLitElement yang kami import di atas. Kami melakukan ini untuk mendapatkan beberapa kaedah mudah daripada kedua-dua Umbraco (bahagian penyetempatan dalam contoh ini) dan Lit (templat dll).
Baris 6: mentakrifkan sifat dalam medan statik, ialah cara kita memberitahu Lit sifat yang harus reaktif.
Baris 26: this.localize.term() tersedia kerana UmbLitElement dan mengambil kunci terjemahan sebagai hujah rentetan.
Baris 32: memanggil this.requestUpdate() ialah cara kami memberitahu Lit untuk memaparkan semula paparan selepas kami menukarnya (sedikit seperti semasa anda memanggil $scope.$apply() dalam hari angularJS).
Baris 37: menghantar UmbPropertyValueChangeEventis cara kami memaklumkan Umbraco bahawa terdapat nilai baharu untuk disimpan.
Baris 41: kaedah pemaparan ialah cara kami memberitahu Lit perkara yang hendak ditunjukkan. Dalam contoh ini, kami benar-benar hanya menghuraikan senarai paparan kepada komponen daripada Perpustakaan UI Umbraco dan mendengar peristiwa perubahan, yang mengemas kini nilai setempat dan memaklumkan Umbraco.

Itu sahaja! Lihat kod ringkas ini di sini: https://github.com/filipbech/dayofweek. Eric, Tony dan pasukan di belakang pakej sebenar telah mengambilnya di luar itu dan menambah beberapa pengesahan dll, jadi ikut repo asal untuk melihatnya dalam kehidupan sebenar.

Permulaan Sesuatu yang Indah

Keindahan dalam pendekatan ini ialah kesederhanaan. Dengan memanfaatkan ciri JavaScript moden dan pelaksanaan pejabat belakang baharu, kami boleh mencipta Editor Harta yang berkuasa dan boleh digunakan semula tanpa memerlukan alat atau rangka kerja binaan yang kompleks.

Saya harap ini memberi inspirasi kepada anda untuk bermain dengan pejabat belakang Umbraco. Terdapat beberapa sintaks baharu untuk dipelajari, tetapi selain daripada itu, saya berpendapat ia adalah semudah untuk mendapatkan bukti konsep dan berjalan seperti pada "zaman dahulu".

Jika anda mempunyai fikiran untuk dikongsi, saya ingin mendengar daripada anda. Mari kita terus membina perkara hebat yang mengembangkan keupayaan CMS ?

Saya menggunakan BlueSky (dan kebanyakan sosial lain) sebagai filipbech - sila hubungi di khalayak ramai supaya semua orang boleh belajar daripada perbincangan!

Atas ialah kandungan terperinci Ia tidak perlu rumit untuk membina editor harta Umbraco tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!