Komposisi di Aurelia.io: Membuat Laporan Pembina

Artikel ini meneroka komposisi visual Aurelia, ciri yang kuat untuk membina UI kompleks menggunakan komponen yang boleh diguna semula. Daripada demo remeh biasa, kami akan membina aplikasi pembina laporan yang mempamerkan keupayaan ini. Demo langsung dan kod sumber tersedia (pautan yang ditinggalkan untuk keringkasan).

Konsep Utama:

• Komposisi visual: Aurelia membolehkan pandangan kompleks bangunan dengan menggabungkan sub-pandangan yang lebih kecil dan boleh diguna semula. Ini berbeza daripada komposisi berasaskan penghalaan tradisional.
• compose elemen: Elemen tersuai ini memudahkan penyembuhan pasangan model pandangan ke dalam pandangan induk, meningkatkan modulariti dan kebolehgunaan semula.
• EventAgGregator: membolehkan komunikasi antara komponen yang lancar tanpa gandingan yang ketat, memudahkan interaksi antara unsur-unsur seperti kotak alat dan laporan.
• Perpustakaan luaran: dengan mudah mengintegrasikan perpustakaan seperti sortable.js untuk fungsi drag-and-drop, mempamerkan fleksibiliti Aurelia.
• Animasi: Perpustakaan Animasi Aurelia dan Animasi CSS memberikan maklum balas visual, meningkatkan pengalaman pengguna.
• sistem plugin: menyokong kod tersuai yang boleh diguna semula dan kod bersih dengan memisahkan fungsi bersama ke dalam pakej.

Memahami Komposisi Visual:

Komposisi visual, pada dasarnya, menggabungkan pandangan yang lebih kecil ke dalam yang lebih besar, lebih kompleks. Ini berbeza antara komposisi homogen

(mengulangi item jenis yang sama) dan komposisi heterogen (menggabungkan pandangan pelbagai jenis). Peralihan tradisional sering mengendalikan ini, tetapi Aurelia memberikan pendekatan kelas pertama yang lebih fleksibel melalui elemen , mempromosikan modulariti dan kebolehgunaan semula. compose

Jenis Komposisi Visual

menggunakan elemen Aurelia's

: compose elemen

memudahkan penyebaran pasangan model pandangan (pandangan dan pandangan-model, sering disebut sebagai "halaman"). Anda menentukan nama fail model-model menggunakan atribut

. Data boleh diluluskan menggunakan atribut compose. Model paparan boleh menentukan kaedah view-model untuk menerima data ini, yang berpotensi mengembalikan janji untuk operasi tak segerak. Selain itu, anda boleh menentukan pandangan alternatif menggunakan atribut model, secara dinamik memilih pandangan berdasarkan sifat-sifat pandangan ibu bapa atau fungsi dalam model pandangan kanak-kanak (activate). view getViewStrategy

Persediaan Projek:

Pembina laporan didasarkan pada aplikasi Navigasi Skeleton Aurelia (pautan github ditinggalkan). Penghala dikeluarkan; Aplikasi ini menggunakan pandangan kompleks tunggal yang terdiri daripada sub-pandangan. Arahan pemasangan boleh didapati di ReadMe Projek.

Laporan Struktur Lihat:

app.html bertindak sebagai bekas utama, menyusun pandangan toolbox dan report. toolbox.html Memaparkan widget dan butang yang tersedia untuk mencetak atau membersihkan laporan. Setiap widget (mis., logo.html, textblock.html) adalah komponen serba lengkap. Paparan report.html paparan memaparkan widget yang ditambah kepadanya, menggunakan komposisi homogen dan heterogen. Fungsi removeWidget dalam model pandangan model mengendalikan mengeluarkan widget.

Komunikasi antara komponen:

EventAggregator memudahkan gandingan longgar antara komponen. Butang clearReport dalam kotak alat menerbitkan acara 'ClearReport', yang model pandangan model melanggan dan menggunakan untuk membersihkan widgetnya.

Perpustakaan dan plugin luaran:

Sortable.js (dipasang melalui JSPM) mengendalikan fungsi drag-and-drop. Aurelia Animator CSS (dipasang melalui JSPM) menyediakan animasi. Sistem plugin membolehkan membuat komponen dan ciri -ciri tersuai yang boleh diguna semula.

animasi:

kelas au-stagger dan au-animate dalam pandangan, digabungkan dengan animasi CSS, buat maklum balas visual semasa penyingkiran komposisi dan widget.

pelaksanaan seret & drop:

sortable.js digunakan dalam kedua-dua toolbox dan report model paparan. Pengendali onAdd dalam model pandangan report menambah widget baru ke laporan, mengendalikan input teks untuk textblocks.

Kesimpulan:

Komposisi visual Aurelia, digabungkan dengan sistem EventAggregator dan plugin, memberikan pendekatan yang kuat dan fleksibel untuk membina UI yang kompleks, modular. Contoh pembina laporan menunjukkan ini dengan berkesan.

(bahagian Soalan Lazim yang ditinggalkan untuk keringkasan, kerana ia sebahagian besarnya berlebihan memandangkan penjelasan terperinci di atas.)

Atas ialah kandungan terperinci Komposisi di Aurelia.io: Membuat Laporan Pembina. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!