Memperluas html cara aurelia.io

Takeaways Key

aurelia.io, rangka kerja JavaScript moden, membolehkan pemaju membuat elemen dan sifat tersuai dalam HTML, meningkatkan fleksibiliti dan fungsi aplikasi web.
Atribut tersuai di Aurelia.io boleh digunakan untuk membungkus plugin sedia ada, menyediakan pintasan untuk pengikatan biasa, atau mengubah elemen HTML yang sedia ada tanpa akses kod langsung. Ini menjadikannya lebih mudah untuk menambah ciri -ciri baru kepada elemen yang sedia ada.
Membuat unsur -unsur baru di Aurelia.io melibatkan menentukan kelas untuk elemen dan pandangan untuk perwakilan HTMLnya. Ini membolehkan penciptaan unsur -unsur baru yang baru dengan tingkah laku dan struktur tersuai, meningkatkan penggunaan semula kod dan reka bentuk modular.
aurelia.io menggunakan satu set konvensyen mudah untuk mengurangkan jumlah kod yang diperlukan, menjadikannya lebih mesra pemaju. Ia juga menawarkan keserasian dengan perpustakaan dan kerangka JavaScript lain, yang membolehkan fleksibiliti yang lebih besar dalam pembangunan web.

Mengajar anjing lama HTML Trik Baru adalah tumpuan utama kerangka JavaScript moden hari ini. Sama ada dengan mengikuti piawaian yang berpotensi seperti Webcomponents, mewujudkan arahan tersuai atau dengan memperluaskan kelas yang sedia ada, kemungkinan besar bahawa rangka kerja pilihan anda menyediakan cara untuk memperluaskan markup HTML itu sendiri. Dalam artikel sebelumnya, yang ditulis oleh Brad Barrow, anda diperkenalkan kepada pemain baru: Aurelia. Artikel ini akan membina artikel dan kod Brad dan menunjukkan kepada anda cara membuat elemen tersuai serta atribut tersuai dengan mengikuti konvensyen Aurelia.

Kod lengkap untuk artikel ini boleh didapati di repo GitHub kami dan anda dapat melihat demo tentang apa yang akan kami bina di sini (sila berikan sedikit masa untuk aplikasinya).

mengapa keperluan untuk lebih banyak markup?

Sebelum melompat terus ke dalam tindakan, mari kita mula -mula memahami kes penggunaan yang berpotensi untuk membuat komponen baru. Untuk berbuat demikian, kita akan melihat pandangan konseptual pada contoh pengantar seperti yang ditunjukkan dalam gambar di bawah. Kami mempunyai dua halaman, yang diwakili oleh ViewModel (VM) dan pandangan, menunjukkan gambar lucu dan video GIF. Setiap daripada mereka mempunyai senarai berulang yang sendiri membuat jawatan yang mengandungi imej dan blok teks.

aurelia reddit pelanggan gambarajah konseptual

dengan melihat pandangan kita dapat melihat pengambilalihan data, serta rendering, ditambah dengan rapat dalam satu pasangan VM/paparan.

<span><span><span><template</span>></span>
</span>  <span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a</span> href<span>="http://reddit.com${p.data.permalink}"</span>></span>
</span>        ${p.data.title}
      <span><span><span></a</span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></template</span>></span></span>

Ini mungkin tidak menjadi masalah dengan contoh yang mudah, tetapi boleh menjadi kelemahan utama apabila sistem berkembang dan semakin banyak keperluan dikumpulkan.

Meningkatkan unsur -unsur yang ada dengan atribut tersuai

Bayangkan kami mendapat permintaan untuk memberikan popover untuk setiap jawatan halaman lucu. Untuk melakukan itu, kami dapat dengan mudah mengikat ciri Bootstrap terus ke dalam markup dengan meletakkan data-atribut yang diperlukan diikuti dengan permulaan di dalam FunnyVM kami. Tetapi bagaimana jika kita tiba -tiba perlu melakukannya di halaman lain juga? Menyediakan ciri ini dengan mengisytiharkan atribut tersuai dapat menjadikan kehidupan kita lebih mudah. Ini amat berguna dalam senario berikut:

• membungkus plugin sedia ada
• pintasan untuk pengikatan biasa seperti gaya atau kelas
• mengubah elemen HTML / elemen tersuai yang sedia ada tanpa akses kod langsung

Sekarang mari kita dapatkan tangan kita kotor dan lihat apa yang diperlukan untuk membina atribut tersuai pertama kami.

Membuat Popover

mari kita mulakan dengan melihat apa yang ingin kita capai. Popover atribut baru harus menerima parameter untuk penempatan, tajuk dan kandungan popover. Penempatan itu ditetapkan ke kanan, jadi rentetan mudah sebagai nilai sudah cukup. Untuk dua sifat lain, kami akan menggunakan data Aurelia yang mengikat untuk memetakan nilai -nilai yang diulang. Untuk memuatkan fail, kami menggunakan ciri memerlukan Aurelia. Dari atribut mengandungi laluan relatif kepada sumber yang akan diimport.

<span><span><span><template</span>></span>
</span>  <span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a</span> href<span>="http://reddit.com${p.data.permalink}"</span>></span>
</span>        ${p.data.title}
      <span><span><span></a</span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></template</span>></span></span>

Untuk membuatnya berlaku, kita mulakan dengan membuat fail JavaScript baru dalam folder SRC yang dipanggil Popover.js. Atribut adat, seperti semua pembentukan Aurelia yang lain, adalah kelas ES6 yang dieksport mudah dan bukannya koleksi fungsi yang diluluskan ke dalam API yang telah ditetapkan (seperti banyak rangka kerja warisan).

<span><span><span><require</span> from<span>="./popover"</span>></span><span><span></require</span>></span>    
</span>...
<span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span>

Berbanding dengan rangka kerja lain, Aurelia mengisytiharkan membina dengan menerangkannya melalui metadata. Tetapi bukannya menggunakan fungsi statik atau API yang rumit, Aurelia memanfaatkan penghias ES7 canggih untuk mencapai itu. Kami akan mengimport penghias yang diperlukan dari pakej Aurelia-kerangka. Bagi kawalan itu sendiri, kami akan menggunakan kawalan JavaScript Popover yang disediakan oleh Twitter Bootstrap. Oleh itu, kami mengimport pemegang jQuery $ serta bootstrap untuk memulakan kod JavaScript Bootstraps.

Langkah seterusnya adalah untuk memohon metadata yang disebutkan sebelumnya supaya Aurelia tahu apa yang diperolehnya apabila ia memuatkan fail. Dengan melampirkan penghias CustomAttribute, kami namakan komponen kami dengan nilai yang diberikan. Penghias yang boleh diikat di sisi lain mengisytiharkan harta yang dilihat oleh pandangan kita. Kami hanya mengulangi penghias ini untuk setiap harta yang tersedia.

<span>import <span>{customAttribute, bindable, inject}</span> from 'aurelia-framework';
</span><span>import $ from 'bootstrap';
</span><span>import bootstrap from 'bootstrap';
</span><span>...</span>

Penghias suntikan pertama menjaga menyediakan elemen DOM sebenar sebagai parameter kepada kaedah pembina kami, yang kemudiannya disimpan untuk kegunaan kemudian.

<span><span><span><template</span>></span>
</span>  <span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a</span> href<span>="http://reddit.com${p.data.permalink}"</span>></span>
</span>        ${p.data.title}
      <span><span><span></a</span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></template</span>></span></span>

Sekarang kita mempunyai semua maklumat yang diperlukan, kita boleh memilih ke dalam kitaran hidup tingkah laku dengan mengisytiharkan kaedah yang dipanggil BIND. Ini memastikan kami memulakan komponen pada masa yang tepat, setanding dengan kaedah siap JQuery.

<span><span><span><require</span> from<span>="./popover"</span>></span><span><span></require</span>></span>    
</span>...
<span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span>

Terakhir tetapi tidak kurang, kami menambah pengendali yang berubah. Perhatikan bahawa ini sebenarnya tidak dilaksanakan dalam contoh kami, kerana sumber mengikat tidak berubah dari masa ke masa.

<span>import <span>{customAttribute, bindable, inject}</span> from 'aurelia-framework';
</span><span>import $ from 'bootstrap';
</span><span>import bootstrap from 'bootstrap';
</span><span>...</span>

Lihat fail lengkap pada github

Sekarang kita telah melihat bagaimana anda boleh menambah ciri -ciri baru dengan menyediakan atribut kepada unsur -unsur yang sedia ada, mari kita teruskan dan mula menulis elemen tersuai kita sendiri.

Buat tag baru dengan elemen tersuai

Untuk mewujudkan unsur -unsur baru, Aurelia memanfaatkan pendekatan yang sangat serupa dengan atribut tersuai. Sebagai contoh, kami akan membina semula jawatan halaman GIF untuk diwakili oleh elemen tersuai yang dipanggil Reddit-GIF dan memberikan kemungkinan untuk menukar dan mematikan video sebenar. Markup yang dihasilkan untuk pandangan kami haruslah ini:

@<span>inject(Element)
</span>@<span>customAttribute('popover')
</span>@<span>bindable('title')
</span>@<span>bindable('content')
</span>@<span>bindable('placement')
</span><span>export class Popover {
</span><span>...</span>

seperti yang anda lihat, kami menggunakan tag baru dan memberikan maklumat yang diperlukan melalui pengikatan data ke harta data.

Langkah seterusnya adalah untuk mencipta elemen sebenar. Kami melakukannya dengan membuat pandangan elemen reddit-gif.html dan VM reddit-gif.js dalam folder SRC. Pandangan, yang dilihat seterusnya, memanfaatkan markup sebelumnya dari gifs.html dan menambah butang yang bertukar iframe yang digunakan untuk membenamkan video sebenar. Sekali lagi, pandangan Aurelia dibungkus di dalam Tag Templat:

<span>constructor(element) {
</span>  <span>this.element = element;
</span><span>}</span>

Melihat bahagian VM, kami mengikuti proses yang sama seperti ketika membuat atribut tersuai. Tetapi kali ini kami memanfaatkan penghias yang berbeza yang akan memberitahu Aurelia bahawa kami akan membuat CustomElement dengan hanya satu harta yang bernama data.

<span>bind() {
</span>  <span>// initialize the popover
</span>  <span>$(this.element).popover({ 
</span>    <span>title: this.title,
</span>    <span>placement: this.placement,
</span>    <span>content: this.content,
</span>    <span>trigger: 'hover' });
</span><span>}</span>

Seterusnya kita menentukan ahli gifaktif untuk menjejaki sama ada iframe harus dipaparkan. Kami juga pada mulanya menetapkan ahli GIFSRC untuk mengosongkan, untuk tidak memuatkan sebarang kandungan jika iframe tidak dapat dilihat.

<span>titleChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.title = newValue;
</span><span>}
</span>
<span>contentChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.content = newValue;
</span><span>}
</span>
<span>placementChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.placement = newValue;
</span><span>}</span>

Terakhir tetapi tidak kurang, kami menambah fungsi togglegif yang digunakan oleh butang togol yang membalikkan penglihatan dan sumber pada setiap panggilan.

<span><span><span><require</span> from<span>="./reddit-gif"</span>></span><span><span></require</span>></span>
</span>...
<span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><reddit-gif</span> data.bind<span>="p.data"</span>></span><span><span></reddit-gif</span>></span>
</span>    <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

anda boleh melihat fail html lengkap di sini dan fail JS di sini

Mengurangkan jumlah kod dengan konvensyen

Aurelia adalah semua tentang membuat pengalaman pemaju sebagai menyenangkan yang mungkin. Mari kita hadapi kebenaran: ramai di antara kita tidak suka menaip banyak. Oleh itu, untuk menjimatkan beberapa ketukan kekunci yang berharga dan meningkatkan penyelenggaraan dari masa ke masa, Aurelia menggunakan satu set konvensyen mudah. Sebagai contoh, versi penuh penghias yang boleh diikat sebenarnya mungkin kelihatan seperti ini, yang kami kerjakan dengan hanya menyediakan nama harta benda. Semua pilihan lain akan disimpulkan secara automatik.

<span><span><span><template</span>></span>
</span>  <span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a</span> href<span>="http://reddit.com${p.data.permalink}"</span>></span>
</span>        ${p.data.title}
      <span><span><span></a</span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></template</span>></span></span>

Satu lagi perkara yang perlu dilihat ialah bagaimana untuk memendekkan penggunaan pelbagai sifat. Oleh itu, bukannya menentukan setiap satu demi satu, kita juga boleh memberitahu atribut tersuai kami untuk mengharapkan sifat dinamik. Untuk berbuat demikian, kami menghiasi kelas kami dengan penghias DynamicOptions. Sekarang kita masih boleh menggunakan semula markup pandangan yang sama tetapi tidak perlu menentukan secara manual semua pengisytiharan harta yang, seperti namanya, sangat membantu dalam konteks dinamik. Ini bermakna kita boleh menulis satu pengendali umum yang dipanggil DynamicPropertyChanged, yang dipanggil apabila mana-mana harta terikat akan berubah.

<span><span><span><require</span> from<span>="./popover"</span>></span><span><span></require</span>></span>    
</span>...
<span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span>

Tetapi bagaimana dengan elemen tersuai? Nah, kami secara tersirat menggunakan beberapa konvensyen yang sudah tidak menyedarinya. Sistem ini secara automatik menarik pandangan dan pasangan VM hanya dengan nama yang sama. Jika anda perlu menggunakan pandangan yang berbeza walaupun anda boleh menggunakan penghias @USEVIEW (RELATEPATH). Atau mungkin tidak menggunakan pandangan sama sekali dengan mengisytiharkan @Noview. Kita juga boleh menjadi gila dan membiarkan pandangan kita diberikan dalam bayang -bayang dengan menambahkan useshadowdom penghias. Sekiranya anda tidak dikenali dengan istilah itu, sila lihat artikel ini

Kesimpulan

kami, pasukan Aurelia, berharap dapat memberikan gambaran ringkas tentang bagaimana untuk memperluaskan HTML sendiri dengan memanfaatkan unsur -unsur dan atribut tersuai. Sepanjang contoh, kami berharap bahawa anda dapat melihat fokus kami pada pengalaman pemaju dengan menawarkan rangka kerja yang fleksibel, namun mudah digunakan, yang tidak berdiri di jalan anda atau membuat anda menggunakan API yang aneh. Kami ingin menjemput anda untuk menyertai saluran Gitter kami jika anda mempunyai sebarang pertanyaan. Kami juga ingin mendengar pengalaman anda semasa anda menulis elemen dan atribut tersuai pertama anda.

Soalan Lazim (Soalan Lazim) Mengenai Memperluas HTML dengan Aurelia.io

Apakah aurelia.io dan bagaimanakah ia melanjutkan html? Ia memanjangkan HTML dengan membenarkan pemaju membuat elemen HTML tersuai, menambah atribut tersuai kepada elemen HTML yang sedia ada, dan mengawal aliran rendering HTML. Ini dicapai melalui enjin templat yang kuat Aurelia, yang menafsirkan unsur -unsur dan atribut tersuai dan menjadikannya sebagai HTML standard. Ini membolehkan aplikasi web yang lebih dinamik, interaktif, dan kompleks sambil mengekalkan kod yang bersih dan boleh dibaca.

Bagaimanakah Aurelia.io dibandingkan dengan kerangka JavaScript yang lain? Tidak seperti banyak kerangka, Aurelia.io direka untuk menjadi koleksi perpustakaan yang berkolaborasi, yang bermaksud anda boleh menggunakan sebanyak atau sedikit kerangka yang anda perlukan. Ia juga menekankan pengekodan berasaskan konvensyen yang bersih, mengurangkan jumlah kod boilerplate yang diperlukan. Tambahan pula, komitmen Aurelia.io untuk mengikuti piawaian web bermakna kod anda akan menjadi bukti masa depan dan serasi dengan teknologi web yang akan datang. Unsur -unsur tersuai di Aurelia.io melibatkan menentukan kelas untuk elemen dan pandangan untuk perwakilan HTMLnya. Kelas ini mengandungi logik untuk elemen, sementara pandangan mentakrifkan struktur HTMLnya. Sebaik sahaja ditakrifkan, elemen tersuai boleh digunakan dalam mana -mana aplikasi Aurelia.io seperti elemen HTML standard. Ini membolehkan penggunaan semula kod dan reka bentuk modular, menjadikan aplikasi anda lebih mudah untuk membangun dan menyelenggara. IO adalah cara untuk menambah tingkah laku tersuai kepada elemen HTML yang sedia ada. Mereka ditakrifkan dengan cara yang sama dengan unsur -unsur tersuai, dengan kelas untuk logik atribut dan pandangan untuk perwakilan HTMLnya. Sebaik sahaja ditakrifkan, atribut tersuai boleh ditambah kepada mana -mana elemen HTML dalam aplikasi Aurelia.io, memanjangkan fungsinya tanpa perlu membuat elemen baru.

aurelia.io menyokong pengikatan data dua hala, yang bermaksud perubahan dalam model secara automatik mengemas kini paparan, dan sebaliknya. Ini dicapai melalui sistem pemerhatian Aurelia.io, yang menjejaki perubahan kepada data dan mengemas kini bahagian -bahagian pandangan yang relevan. Ini memudahkan untuk membuat aplikasi yang dinamik dan interaktif di mana UI sentiasa mencerminkan keadaan data semasa. .io direka untuk bersesuaian dengan perpustakaan dan kerangka JavaScript lain. Ia menggunakan seni bina modular, yang bermaksud anda boleh memilih dan memilih bahagian kerangka yang hendak digunakan. Ini memudahkan untuk mengintegrasikan aurelia.io ke dalam projek yang sedia ada, atau menggunakan perpustakaan dan kerangka lain di samping aurelia.io. Termasuk penghala yang kuat yang membolehkan senario navigasi kompleks. Router menyokong laluan bersarang, parameter pilihan, dan laluan dinamik, antara ciri -ciri lain. Ini menjadikannya mudah untuk membuat aplikasi satu halaman dengan aurelia.io, di mana pengguna boleh menavigasi antara pandangan yang berbeza tanpa menyegarkan halaman.

Apakah keluk pembelajaran untuk aurelia.io? Jika anda biasa dengan JavaScript dan HTML, anda sepatutnya dapat mengambil aurelia.io dengan cepat. Dokumentasi Rangka Kerja ini komprehensif dan termasuk banyak contoh untuk membantu anda memulakan. kebolehpercayaan dan prestasi. Ia menggunakan gabungan ujian unit, ujian integrasi, dan ujian akhir-ke-akhir untuk menampung semua aspek rangka kerja. Dari segi prestasi, aurelia.io direka untuk menjadi cepat dan cekap, dengan jejak minimum dan rendering yang dioptimumkan. IO mempunyai komuniti pemaju yang bersemangat dan aktif yang menyumbang kepada rangka kerja dan memberi sokongan kepada satu sama lain. Terdapat banyak sumber yang tersedia, termasuk forum komuniti, bilik sembang gitter, dan tag limpahan stack. Di samping itu, pasukan Aurelia.io menyediakan perkhidmatan sokongan dan latihan profesional.

Atas ialah kandungan terperinci Memperluas html cara aurelia.io. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!