Menggunakan template dengan Pemaparan JavaScript
Gabungkan templat dengan gelung JavaScript untuk senarai dinamik
Menggunakan template dengan Pemaparan JavaScript ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Elemen template
Elemen <template> menyimpan HTML yang tidak dipaparkan sehingga diklon dan disisipkan oleh JavaScript. Kandungannya tidak aktif — skrip tidak dijalankan, imej tidak dimuatkan dan gaya tidak digunakan — sehingga template diaktifkan.
Mengakses Kandungan template
Kandungan template berada dalam DocumentFragment pada template.content. Untuk menggunakannya, klonkan fragmen tersebut: const clone = template.content.cloneNode(true). Argumen true menghasilkan klon deep yang merangkumi semua nod keturunan.
Memaparkan Instans template
Sesuaikan salinan sebelum menyisipkannya: lakukan carian dalam salinan, tetapkan kandungan teks dan tambah pendengar peristiwa. Kemudian tambahkannya ke DOM: container.appendChild(clone). Setiap cloneNode() menghasilkan salinan bebas — ubah suai satu tanpa menjejaskan yang lain.
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}Memaparkan Senarai daripada template
Gabungkan template dengan Array.forEach atau Array.map untuk memaparkan senarai: bagi setiap item dalam data, klonkan template, isikan nilai dan tambahkannya ke dalam container senarai. Corak ini menyerupai kerangka kerja, tetapi dibina menggunakan HTML dan JavaScript standard.
template untuk Baris Jadual
Takrifkan <template> yang mengandungi <tr> dengan sel. Klonkan dan isikan nilainya bagi setiap baris data. Ini mengelakkan penggabungan rentetan untuk menjana HTML — tiada pelolosan diperlukan kerana anda menetapkan textContent, bukannya innerHTML.
Pengaktifan template adalah Eksplisit
template tidak pernah dipaparkan secara automatik. Ini menjadikannya selamat untuk menyimpan fragmen yang akan dipaparkan secara bersyarat: tunjukkan template "tiada hasil" hanya apabila carian tidak menemui hasil, template ralat hanya apabila rangkaian gagal, dan rangka pemuatan semasa data diambil.
template Bersarang
Sebuah template boleh mengandungi template lain — template bersarang kekal tidak aktif di dalam DocumentFragment template luar. Ini membolehkan hierarki seperti komponen, apabila template luar mengklon dan kemudian mengaktifkan template dalam mengikut keperluan.
Gaya Berskop dalam template
Gaya di dalam teg <style> template tidak digunakan pada dokumen — gaya tersebut tidak aktif sehingga template dijadikan instans dan kandungannya dipindahkan ke DOM aktif. Ini membolehkan template membawa gaya sendiri tanpa mencemarkan halaman.
template berbanding innerHTML
Penghuraian innerHTML ialah pemprosesan rentetan HTML secara segerak — HTML dihuraikan semula setiap kali. template.cloneNode() menyalin pepohon yang telah dihuraikan. Untuk pemaparan berulang bagi struktur yang sama, pengklonan template lebih pantas dan mengelakkan risiko XSS daripada penggabungan rentetan.
Had Pengikatan Data
Elemen template tidak mempunyai pengikatan data terbina dalam — anda mesti mencari dan mengisi setiap salinan secara manual. Untuk keperluan pengikatan data yang kompleks, kerangka kerja atau pustaka lebih sesuai. template adalah untuk corak pemaparan manual yang ringkas tanpa lebihan kerangka kerja.
Sokongan Pelayar
Elemen template disokong dalam semua pelayar moden (IE11 hanya mempunyai sokongan separa). Untuk persekitaran yang memerlukan sokongan IE, sediakan lapisan keserasian dengan menghuraikan kandungan template semasa pemulaan. Dalam projek moden, gunakan template tanpa lapisan keserasian.
Semakan Pengetahuan
Mengapakah template.content.cloneNode(true) lebih disarankan berbanding innerHTML untuk pemaparan berulang?
Ringkasan
Elemen template menyimpan fragmen HTML yang tidak aktif dan telah dihuraikan terlebih dahulu. Pengklonan template.content menghasilkan instans bebas untuk pengikatan data manual. Digabungkan dengan penetapan textContent (tiada XSS), template membolehkan pemaparan senarai seperti kerangka kerja, UI bersyarat dan corak HTML boleh guna semula hanya dengan API pelayar standard.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Menggunakan template dengan Pemaparan JavaScript” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Menggunakan template dengan Pemaparan JavaScript”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menggunakan template dengan Pemaparan JavaScript”?
Gabungkan templat dengan gelung JavaScript untuk senarai dinamik Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Menggunakan template dengan Pemaparan JavaScript” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Elemen template Kandungan Tidak Aktif
- Mengklon Templat dengan cloneNode
- Menggunakan template dengan Pemaparan JavaScript
- Templat berbanding Keselamatan innerHTML