Membuat templat HTML dengan mistache.js

Aplikasi web biasanya menggunakan seni bina MVC untuk memisahkan logik perniagaan dari pandangan persembahan. Projek -projek kompleks melibatkan sejumlah besar HTML pelanggan yang menggunakan operasi JavaScript, yang boleh menjadi sukar untuk dikekalkan. Dalam kes ini, kita boleh menggunakan sistem templat untuk meningkatkan kebolehgunaan semula dan memudahkan tugas pengurusan pandangan. Mustache.js menyediakan sistem templat yang didokumentasikan dengan baik yang boleh digunakan untuk menguruskan templat. Selain itu, kerana misai menyokong pelbagai bahasa, kami tidak perlu menggunakan sistem templat berasingan di sisi pelayan. Artikel ini menerangkan asas -asas menggunakan misai.

mata utama

Mustache.js adalah sistem templat yang didokumentasikan dengan baik yang boleh digunakan untuk menguruskan templat HTML dalam aplikasi web yang kompleks, meningkatkan kebolehgunaan semula dan memudahkan tugas pengurusan pandangan.
mistache.js tidak logik, yang bermaksud templatnya tidak mengandungi sebarang keadaan jika else atau untuk gelung. Ia menggunakan label yang dilambangkan oleh pendakap ganda untuk menambah data ke templat.
Templat kumis boleh ditakrifkan dalam beberapa cara, termasuk kaedah sebaris, skrip sebaris, dan coretan HTML luaran. Kaedah yang mana untuk dipilih bergantung kepada keperluan khusus projek.
Mustache.js adalah alat pelbagai fungsi yang boleh digunakan pada kedua-dua klien dan sisi pelayan dan menyokong pelbagai bahasa. Ia juga dilengkapi dengan tag untuk menguruskan templat kompleks seperti pembolehubah, bahagian, fungsi, dan templat separa.

Mengapa kita memerlukan sistem templat?

Kebanyakan pemaju yang tidak tahu mengenai sistem templat membuat blok HTML baru kod dan memasukkannya secara dinamik ke dalam DOM menggunakan JavaScript. Kaedah yang sama adalah untuk menentukan elemen HTML sebagai rentetan, kemudian tetapkan harta InnerHTML atau hubungi kaedah JQuery HTML (). Berikut adalah contoh:

<code class="language-javascript">var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;</code>

Cara lain untuk membina DOM adalah untuk membuat unsur -unsur dan menambahkannya secara berasingan, seperti yang ditunjukkan di bawah:

<code class="language-javascript">var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);</code>

Kedua -dua kaedah di atas dapat menambahkan elemen secara berkesan ke dokumen secara dinamik. Pertimbangkan situasi di mana kami mempunyai senarai peluru yang direka dengan baik yang perlu digunakan dalam tiga jenis halaman laman web. Menggunakan teknik ini, kita perlu mengulangi senarai kod HTML di tiga lokasi yang berbeza. Ini sering dianggap sebagai kebiasaan pengekodan yang buruk. Dalam kes ini, kita boleh menggunakan templat yang telah ditetapkan di lokasi yang berbeza tanpa menduplikasi kod. Mustache.js adalah enjin templat JavaScript yang sangat popular. Oleh kerana kumis menawarkan templat sisi pelayan dan pelanggan dalam pelbagai bahasa, kita tidak perlu bimbang tentang memilih enjin templat yang berasingan.

pemula mistache.js

Mustache adalah sistem templat bebas logik sumber terbuka yang sesuai untuk bahasa seperti JavaScript, Ruby, Python, PHP, dan Java. Anda boleh mengakses halaman rasmi di GitHub untuk mendapatkan salinan perpustakaan. Misai menggunakan templat dan pandangan sebagai asas untuk membuat templat dinamik. Pandangan ini mengandungi data JSON untuk dimasukkan ke dalam templat. Templat mengandungi persembahan HTML atau data dengan tag templat yang mengandungi data paparan. Kami menyebut sebelum ini bahawa kumis tidak logik. Ini bermakna bahawa templat tidak mengandungi sebarang syarat if-else atau untuk gelung. Sekarang, mari kita mulakan dengan template misai dengan contoh mudah.

<code class="language-javascript">var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;</code>

Pertama, kita perlu memasukkan fail Mustache.js dalam dokumen. Kemudian kita boleh mula membuat template misai. Dalam contoh di atas, kita mempunyai pandangan yang mengandungi nama dan pekerjaan seseorang. Kami kemudian menggunakan tag yang membentangkan kod dan nama dan data kerjaya dalam fungsi render (). Label diwakili oleh pendakap dua atau janggut di sekelilingnya. Sekarang mari kita lihat bagaimana kaedah render () berfungsi.

Rendering Template Misai

Kod berikut menunjukkan pelaksanaan fungsi render () dalam fail Mustache.js. Tiga parameter boleh diluluskan untuk membuat (). Templat dan pandangan parameter pertama diperlukan. Separa boleh dianggap sebagai templat dinamik yang anda boleh menyuntik ke dalam templat utama. Dalam contoh terdahulu kami, kami meluluskan templat sebagai parameter inline, pandangan sebagai parameter kedua, dan memberikan hasil kepada pemboleh ubah output.

<code class="language-javascript">var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);</code>

Ini adalah bentuk yang paling asas untuk menggunakan kumis. Mari kita lihat kaedah lain yang boleh digunakan untuk membuat lebih banyak kod kanonik.

Template misai definisi

Terdapat beberapa cara untuk menentukan template misai dalam permohonan anda. Kaedah ini sama dengan menggunakan gaya inline, gaya gaya inline, dan stylesheet luaran untuk memasukkan CSS. Contoh yang dibincangkan sebelumnya dapat dianggap sebagai kaedah sebaris kerana kita lulus templat terus ke fungsi. Kaedah ini menghalang kemungkinan templat yang boleh diguna semula. Mari kita lihat bagaimana untuk menentukan templat sebagai templat skrip inline dan bukannya lulus terus ke fungsi.

templat sebagai skrip inline

kita boleh pergi ke

Anda boleh memasukkan banyak templat dengan ID yang berbeza dalam dokumen yang anda mahukan. Apabila anda ingin menggunakan templat, gunakan innerHTML untuk mendapatkan HTML di dalam tag skrip dan lulus sebagai templat. Contoh pertama kami akan ditukar kepada kod berikut:

<code class="language-html"><!DOCTYPE html>


  <title>Mustache.js Inline Method</title>
  


  
  <p id="person"></p>


</code>

Seperti yang anda lihat, templat disimpan secara berasingan dan digunakan secara dinamik apabila diperlukan. Kaedah ini meningkatkan kemungkinan menggunakan semula templat. Walau bagaimanapun, menggunakan skrip sebaris akan mengehadkan skop templat ke satu halaman. Jika anda mempunyai beberapa halaman, anda mesti menentukan templat sekali lagi. Jadi termasuk templat dalam fail luaran akan menjadi penyelesaian yang ideal - sama seperti CSS.

templat sebagai luaran html luaran

Dalam teknik ini, kami akan menggunakan jQuery untuk melaksanakan templat. JQuery menyediakan fungsi yang dipanggil beban () yang boleh digunakan untuk mendapatkan sebahagian daripada dokumen luaran. Kami akan menggunakan kaedah ini untuk memuatkan templat secara dinamik dari fail templat luaran. Fungsi beban () melaksanakan skrip dan bukannya mengembalikannya, jadi kami tidak dapat membuat templat di dalam tag skrip seperti yang kami lakukan dalam kaedah sebelumnya. Contoh berikut menunjukkan fail templat luaran yang akan kami gunakan.

<code class="language-javascript">var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;</code>

Kami telah menggunakan elemen <div> dan bukan skrip untuk templat untuk menjadikannya serasi dengan fungsi beban JQuery (). Di sini kita mempunyai tiga templat yang berbeza dengan tiga ID yang berbeza. Sekarang, mari kita terus menggunakan templat ini di halaman anda. <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;var title = document.createElement('div'); var highlight = document.createElement('span'); var highlight_text = document.createTextNode(&quot;Highlight&quot;); var author = document.createElement('span'); var author_text = document.createTextNode(&quot;Author&quot;); var container = document.getElementById('container'); highlight.appendChild(highlight_text); title.appendChild(highlight); author.appendChild(author_text); title.appendChild(author); container.appendChild(title);&lt;/code&gt;</pre> <p> JQuery memasukkan dokumen yang dikembalikan ke dalam elemen HTML dan bukannya menyerahkannya kepada pembolehubah. Oleh itu, kita memerlukan bekas maya untuk memegang templat. Saya telah menggunakan bekas templat yang tersembunyi secara lalai. Contoh di atas mengambil template1 dan memuatkannya. Kita kemudian boleh mendapatkan templat dari bekas maya dan lulus ke misai untuk rendering. Ini adalah cara kaedah luaran berfungsi. Kami juga boleh menggunakan permintaan AJAX untuk mendapatkan data dari pelayan. </p> <p> <strong> Kesimpulan </strong> </p> <p> Enjin dan kerangka template sangat penting untuk menguruskan sistem kompleks dengan pandangan persembahan secara dinamik. Mustache.js adalah salah satu pilihan terbaik untuk template admin di sisi klien. Kami menerangkan pada permulaan tutorial ini mengapa templat penting. Kemudian, kami terus memperkenalkan pelbagai teknik menggunakan template misai. Anda kini dapat memilih cara untuk melaksanakan template misai dalam projek anda. Kami telah melakukan meneroka pelbagai teknik untuk menggunakan template misai, tetapi kumis juga dilengkapi dengan tag seperti pembolehubah, bahagian, fungsi, dan templat separa yang digunakan untuk menguruskan templat kompleks. Membincangkan sintaks untuk setiap tag adalah di luar skop tutorial ini. Anda boleh mencari panduan komprehensif untuk tag misai pada halaman github mistache. Jangan ragu untuk berkongsi pengalaman anda sebelumnya dengan mistache.js! </p> <p> <strong> FAQ Mustache.js (FAQ) </strong> <s> </s></p> <ul> <li> Apakah perbezaan utama antara mistache.js dan perpustakaan template JavaScript lain? <strong> </strong> </li> </ul> Mustache.js adalah sintaks templat logik. Ini bermakna ia boleh digunakan untuk HTML, fail konfigurasi, kod sumber -apa -apa. Ia berfungsi dengan memperluaskan label dalam templat menggunakan hash atau nilai yang disediakan dalam objek. Tidak seperti perpustakaan template JavaScript lain, mistache.js tidak mengandungi sebarang kenyataan, klausa lain, atau untuk gelung. Sebaliknya, ia hanya mempunyai label. Sesetengah tag digantikan dengan nilai, ada yang tidak mempunyai apa -apa, yang lain adalah satu siri nilai. <p> </p> <ul> <li> bagaimana menggunakan mistache.js untuk templat html? <strong> </strong> </li> </ul> Untuk menggunakan mistache.js untuk templat HTML, anda perlu memasukkan skrip mistache.js terlebih dahulu dalam fail HTML. Kemudian, anda menentukan templat dalam tag <p>. Templat ini boleh mengandungi ruang letak untuk memasukkan data. Placshurs ini diwakili oleh pendakap ganda, seperti {{name}}. Anda kemudian menggunakan fungsi mistache.render () untuk menjadikan templat dengan data yang anda berikan. <code><script></script>

• Bolehkah saya menggunakan mistache.js dengan node.js?

Ya, anda boleh menggunakan mistache.js dengan node.js. Untuk melakukan ini, anda perlu memasang pakej kumis menggunakan npm. Sebaik sahaja pemasangan selesai, anda boleh memerlukannya dalam fail Node.js dan menggunakannya untuk menjadikan templat.

• Bagaimana menggunakan mistache.js untuk melintasi tatasusunan?

Dalam mistache.js, anda boleh melintasi array menggunakan {{#Array}} ... {{/array}} sintaks. Dalam blok ini, anda boleh menggunakan {{.}} Untuk merujuk item semasa dalam array. Ini membolehkan anda memaparkan setiap item dalam array dalam templat.

• Bagaimana menggunakan pernyataan bersyarat dalam mistache.js?

Walaupun mistache.js adalah perpustakaan template yang tidak logik yang tidak menyokong pernyataan tradisional jika, anda masih boleh menggunakan bahagian untuk mendapatkan hasil yang sama. Bahagian membuat blok teks sekali atau lebih kali berdasarkan nilai kunci dalam objek data.

• Bagaimana untuk memasukkan beberapa templat dalam mistache.js?

Beberapa templat dalam mistache.js membolehkan anda memasukkan templat yang lebih kecil dalam templat yang lebih besar. Ini sangat berguna untuk menggunakan semula unsur -unsur biasa seperti tajuk dan kaki. Untuk memasukkan templat separa, anda boleh menggunakan sintaks {{& gt; partial}}.

• bagaimana untuk melarikan diri html dalam mistache.js?

Secara lalai, Mustache.js melarikan diri HTML dalam data untuk mencegah serangan XSS. Jika anda ingin memberikan HTML dari data anda, anda boleh menggunakan sintaks triple brace, seperti {{{html}}}.

• Bolehkah saya menggunakan mistache.js untuk sisi pelayan?

Ya, anda boleh menggunakan mistache.js untuk sisi pelayan. Ini berguna untuk membuat template sebelum menghantarnya kepada pelanggan, mengurangkan jumlah JavaScript yang perlu dilaksanakan pada pelanggan.

• Bagaimana untuk mempercepatkan template dalam mistache.js?

Templat precompiling dalam mistache.js dapat meningkatkan prestasi dengan mengurangkan kerja yang perlu dilakukan pada masa runtime. Untuk precompile templat, anda boleh menggunakan fungsi mistache.parse ().

• bagaimana debug template mistache.js?

Debugging Template mistache.js boleh menjadi rumit kerana perpustakaan tidak memberikan banyak mesej ralat. Walau bagaimanapun, anda boleh menggunakan fungsi mistache.parse () untuk memeriksa sama ada templat anda sah. Fungsi ini mengembalikan pelbagai tag yang boleh anda periksa untuk melihat apakah struktur templat anda betul.