Panduan pemula ' s ke hendal

Kini majoriti web terdiri daripada aplikasi dinamik di mana data terus berubah. Akibatnya, terdapat keperluan berterusan untuk mengemas kini data yang diberikan pada penyemak imbas. Di sinilah enjin templating JavaScript datang untuk menyelamatkan dan menjadi sangat berguna. Mereka memudahkan proses mengemas kini pandangan secara manual dan pada masa yang sama mereka meningkatkan struktur aplikasi dengan membenarkan pemaju memisahkan logik perniagaan dari seluruh kod. Beberapa enjin templating JavaScript yang paling terkenal adalah misai, garis bawah, EJS, dan hendal. Dalam artikel ini, kami akan menumpukan perhatian kepada hendal dengan membincangkan ciri -ciri utamanya.

Takeaways Key

Handlebars adalah enjin templating logik-kurang yang memanjangkan misai, menambah logik yang minimum melalui pembantu, menjadikannya sesuai untuk memisahkan struktur HTML dari logik perniagaan dan meningkatkan pemeliharaan aplikasi.
Penciptaan templat dalam hendal melibatkan menggunakan pendakap keriting berganda `{{}}` untuk pembolehubah, yang boleh dikompilasi untuk meningkatkan prestasi dan mengurangkan pemprosesan sisi klien.
hendal menyokong pembantu tersuai, membolehkan pemaju melaksanakan logik kompleks dalam templat, memberikan fleksibiliti melampaui pengikatan data mudah. ​​
Templat separa di hendal memudahkan kebolehgunaan kod di seluruh bahagian aplikasi, menyelaraskan proses pembangunan dan mengekalkan konsistensi.
Precompilation of Templates Handlebars dapat meningkatkan prestasi aplikasi web dengan meminimumkan overhead kompilasi runtime di sisi klien.

hendal: Apa itu dan mengapa menggunakannya

Handlebar adalah enjin templating logik yang kurang menghasilkan halaman HTML anda secara dinamik. Ia adalah lanjutan kumis dengan beberapa ciri tambahan. Misai adalah logik sepenuhnya tetapi hendal menambah logik yang minimum terima kasih kepada penggunaan beberapa pembantu (seperti jika, dengan, kecuali, setiap satu) bahawa kita akan membincangkan lebih lanjut dalam artikel ini. Sebenarnya, kita boleh mengatakan bahawa hendal adalah superset kumis.

Jika anda bertanya mengapa anda perlu menggunakan enjin templat ini dan bukannya yang lain, anda harus melihat kebaikannya. Berikut adalah senarai pendek:

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

Ia menyimpan halaman HTML anda bersih dan memisahkan templat logik-kurang dari logik perniagaan dalam fail JavaScript anda, dengan itu meningkatkan struktur aplikasi (dan juga penyelenggaraan dan skalabilitasnya)

ia memudahkan tugas mengemas kini data secara manual pada pandangan

• Ia digunakan dalam rangka kerja dan platform yang popular seperti Ember.js, Meteor.js, Derby.js dan Ghost
Saya harap rekap pendek ini membantu anda dalam menentukan jika ia bernilai menggunakan hendal atau tidak.

• bagaimana ia berfungsi?

  

  Seperti yang ditunjukkan dalam rajah di atas, cara kerja hendal dapat diringkaskan seperti berikut:

• Fungsi ini kemudian dilaksanakan dengan meluluskan objek JSON sebagai hujah. Objek JSON ini dikenali sebagai konteks dan mengandungi nilai -nilai pembolehubah yang digunakan dalam templat
• Pada pelaksanaannya, fungsi mengembalikan HTML yang diperlukan setelah menggantikan pembolehubah templat dengan nilai yang sepadan
Untuk memahami proses di atas, mari kita mulakan dengan demo yang menerangkan secara terperinci semua langkah yang disebutkan di atas.

templat

Templat boleh ditulis dalam fail HTML atau secara berasingan. Dalam kes pertama, mereka muncul di dalam tag dengan atribut jenis = "teks/x-handlebars-templat" dan ID. Pembolehubah ditulis dalam pendakap keriting berganda {{}} dan dikenali sebagai ungkapan. Berikut adalah contoh:

Dengan markup ini, kita dapat melihat apa yang perlu kita lakukan. Dalam fail JavaScript anda, kami perlu mengambil templat dari dokumen HTML. Dalam contoh berikut, kami akan menggunakan ID templat untuk tujuan ini. Selepas templat telah diambil, kami dapat menyusunnya dengan menggunakan kaedah handlebars.Compile () yang mengembalikan fungsi. Fungsi ini kemudian dilaksanakan dengan lulus konteks sebagai hujah. Apabila pelaksanaan selesai, fungsi mengembalikan HTML yang dikehendaki dengan semua pembolehubah yang digantikan dengan nilai yang sepadan. Pada ketika ini kita boleh menyuntik HTML ke laman web kami.

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

Mengubah keterangan ini ke dalam hasil kod dalam coretan berikut:
demo langsung kod ini boleh didapati dalam demo codepen ini
sintaks

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

Sekarang sudah tiba masanya untuk menyelam sedikit lebih mendalam ke hendal. Kami akan melalui beberapa istilah penting dan sintaks yang membentuk teras hendal.

Ekspresi

kita sudah melihat ungkapan di bahagian di atas. Pembolehubah yang digunakan di dalam templat dikelilingi oleh pendakap keriting berganda {{}} dan dikenali sebagai ekspresi:

HTML Escaping

hendal boleh melepaskan nilai yang dikembalikan oleh ungkapan. Sebagai contoh watak

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

digunakan dengan pembolehubah konteks yang dilaporkan di bawah:
HTML yang dihasilkan akan menjadi:

<span>My name is {{name}}</span>

demo langsung yang menunjukkan ciri ini boleh didapati dalam demo codepen ini

Komen

kita juga boleh menulis komen di dalam templat handlebars. Sintaks untuk komen hendal adalah {{! TypeyourcommentHere}}. Walau bagaimanapun, setiap komen yang mempunyai}} di dalamnya atau mana-mana simbol lain yang mempunyai makna khas dalam hendal hendaklah ditulis dalam bentuk {{!-typeyourcommenthere--}}. Komen Handlebars tidak dapat dilihat di HTML tetapi jika anda ingin menunjukkannya, anda boleh menggunakan komen HTML standard: .

Jika kita memohon semua konsep ini untuk templat yang kita gunakan, kita boleh membuat kod yang ditunjukkan di bawah:

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

Jika kita menggunakan templat sebelumnya dengan pembolehubah konteks yang dilaporkan di bawah:
output HTML akan menjadi:

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

yang akan mengakibatkan penyemak imbas tidak menunjukkan kandungan di dalam komen HTML standard. Demo contoh ini boleh didapati di sini.

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

Blok
Dalam hendal, blok adalah ungkapan yang mempunyai pembukaan blok ({{#}}) dan penutupan ({{/}}). Kami akan belajar secara mendalam topik ini kemudian sambil memberi tumpuan kepada pembantu. Buat masa ini, lihat bagaimana blok jika ditulis:
Paths
hendal menyokong kedua -dua laluan biasa dan bersarang, menjadikannya mungkin untuk mencari sifat bersarang di bawah konteks semasa. Handlebars juga menyokong segmen PATH ../. Segmen ini merujuk kepada skop templat induk dan bukan satu tahap dalam konteks.

<span>My name is {{name}}</span>

Untuk memahami lebih baik topik ini, kami akan menggunakan contoh di bawah di mana kami menggunakan setiap penolong (dibincangkan secara terperinci kemudian). Seperti yang anda harapkan, yang terakhir melangkah ke atas item array.

Dalam contoh ini, kami akan menggunakan template berikut:

dengan menyediakan pembolehubah konteks ini:

I am learning {{language}}. It is {{{adjective}}}.

Kami akan memperoleh output yang ditunjukkan di bawah:
Seperti coretan kecil lain yang telah kami buat setakat ini, contoh ini boleh didapati di Codepen

<span>var context = {"language" : "<h3 id="Handlebars">Handlebars</h3>","adjective": "<h3 id="awesome">awesome</h3>"}</span>

pembantu

Walaupun hendal adalah enjin templat yang kurang logik, ia boleh melaksanakan logik mudah menggunakan pembantu. Penolong Handle adalah pengecam mudah yang boleh diikuti oleh parameter (dipisahkan oleh ruang), seperti yang ditunjukkan di bawah:

I am learning <span><span><span><h3 id="gt">></h3></span>Handlebars<span><span></span>></span>. It is <span><span><h3 id="gt">></h3></span>awesome<span><span></span>></span></span></span></span>

Setiap parameter adalah ungkapan hendal. Pembantu ini boleh diakses dari sebarang konteks dalam templat.
Istilah "blok", "penolong", dan "penolong blok" kadang-kadang digunakan secara bergantian kerana kebanyakan pembantu terbina dalam adalah blok, walaupun terdapat pembantu fungsi yang sedikit berbeza dari pembantu blok. Kami akan membincangkannya semasa meliputi pembantu tersuai.
Beberapa pembantu terbina dalam adalah jika, masing-masing, kecuali, dan dengan. Mari kita pelajari lebih lanjut.

setiap penolong

Setiap penolong digunakan untuk melangkah ke atas array. Sintaks penolong adalah {{#each arrayname}} yourContent {{/each}}. Kita boleh merujuk kepada item array individu dengan menggunakan kata kunci ini di dalam blok. Indeks elemen array boleh diberikan dengan menggunakan {{@index}}. Contoh di bawah menggambarkan penggunaan setiap penolong.

Jika kita menggunakan template berikut:

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

bersempena dengan pembolehubah konteks ini:
maka output akan menjadi:

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

Demo langsung contoh ini boleh didapati di Codepen.

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

Jika penolong
penolong IF adalah serupa dengan pernyataan IF. Jika keadaan menilai nilai

kebenaran

, hendal akan menjadikan blok tersebut. Kami juga boleh menentukan seksyen templat yang dikenali sebagai "seksyen lain", dengan menggunakan {{else}}. Kecuali pembantu adalah kebalikan dari penolong jika. Ia menjadikan blok apabila keadaan menilai nilai

falsy . Untuk menunjukkan bagaimana penolong jika berfungsi, mari kita pertimbangkan templat di bawah:

Jika kami menyediakan pembolehubah konteks berikut:

<span>My name is {{name}}</span>

Kami akan memperoleh keputusan yang dilaporkan di bawah:

I am learning {{language}}. It is {{{adjective}}}.

ini berlaku kerana array kosong adalah

falsy

nilai.
Sekiranya anda ingin bermain dengan pembantu, anda boleh melihat demo langsung yang saya buat di Codepen.

<span>var context = {"language" : "<h3 id="Handlebars">Handlebars</h3>","adjective": "<h3 id="awesome">awesome</h3>"}</span>

Pembantu Custom Anda boleh membuat pembantu anda sendiri untuk melakukan logik yang kompleks menggunakan sistem ekspresi yang disediakan oleh hendal. Terdapat dua jenis pembantu: pembantu fungsi dan pembantu blok. Takrif pertama dimaksudkan untuk ungkapan tunggal, manakala yang terakhir digunakan untuk ekspresi blok. Hujah -hujah yang diberikan kepada fungsi panggil balik adalah parameter yang ditulis selepas nama pembantu, dipisahkan oleh ruang. Pembantu dibuat menggunakan handlebars.RegistHelper () Kaedah:

Helper Fungsi Custom

Sintaks untuk penolong fungsi adalah {{HelperName Parameter1 Parameter2 ...}}. Untuk lebih memahami bagaimana untuk meneruskan pelaksanaannya, mari kita buat penolong fungsi yang dipanggil StudyStatus yang mengembalikan rentetan yang akan "diluluskan" jika lulus = 2015:

I am learning <span><span><span><h3 id="gt">></h3></span>Handlebars<span><span></span>></span>. It is <span><span><h3 id="gt">></h3></span>awesome<span><span></span>></span></span></span></span>

Dalam contoh kami parameter hanya satu. Walau bagaimanapun, jika kita mahu lulus lebih banyak parameter ke fungsi panggil balik pembantu kita boleh menulisnya dalam templat selepas parameter pertama dipisahkan oleh ruang.
mari kita mengembangkan contoh dengan templat ini:
dan dengan pembolehubah konteks berikut:

<span><!-- I am learning {{language}} -->I am learning {{language}}. It is {{!--adjective--}}</span>

Dalam kes ini, output akan menjadi:

<span>var context = {"language" : "Handlebars","adjective": "awesome"}</span>

Demo langsung contoh ini boleh didapati di sini.

Helper Blok Custom

<span><!-- I am learning Handlebars -->I am learning Handlebars. It is</span>

Pembantu blok tersuai digunakan dengan cara yang sama seperti pembantu fungsi, tetapi sintaks agak berbeza. Sintaks pembantu blok adalah:

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

Apabila kami mendaftarkan pembantu blok tersuai, hendal secara automatik menambah objek pilihan sebagai parameter terakhir ke fungsi panggil balik. Objek Pilihan ini mempunyai kaedah FN () yang membolehkan kita mengubah konteks objek sementara untuk mengakses harta tertentu. Mari kita ubah contoh bahagian sebelumnya dengan menggunakan pembantu blok bernama StudyStatus tetapi dengan pembolehubah konteks yang sama:

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

Jika kod ini digunakan bersempena dengan templat yang ditakrifkan di bawah
kami akan memperoleh hasil berikut:

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

Dan inilah demo codepen.

<span>My name is {{name}}</span>

Templat separa
hendal separa adalah templat yang boleh dikongsi di antara templat yang berbeza. Mereka ditulis sebagai {{> partialName}}. Sebelum menggunakannya dalam HTML, kita perlu mendaftarkan sebahagiannya menggunakan kaedah handlebars.RegisterPartial (). Contoh berikut akan membantu anda dalam memahami bagaimana untuk mendaftarkan separa yang dinamakan partialtemplate:
apabila digunakan dengan templat yang ditakrifkan di bawah

I am learning {{language}}. It is {{{adjective}}}.

ia akan memberikan hasil berikut:

<span>var context = {"language" : "<h3 id="Handlebars">Handlebars</h3>","adjective": "<h3 id="awesome">awesome</h3>"}</span>

demo langsung kod ini boleh didapati dalam demo codepen ini.
Precompilation
Seperti yang telah kita lihat, hendal perkara pertama adalah untuk menyusun templat ke dalam fungsi. Ini adalah salah satu operasi paling mahal untuk dilakukan pada pelanggan. Kami boleh meningkatkan prestasi aplikasi jika kami precompile templatescript dan kemudian menghantar versi yang disusun kepada pelanggan. Dalam hal ini, satu -satunya tugas yang perlu dilakukan pada pelanggan akan menjadi pelaksanaan fungsi itu. Oleh kerana fail precompiled adalah skrip, kita boleh memuat skrip dalam HTML sebagai fail biasa. Mari lihat bagaimana semua perkara ini dapat dilakukan.

I am learning <span><span><span><h3 id="gt">></h3></span>Handlebars<span><span></span>></span>. It is <span><span><h3 id="gt">></h3></span>awesome<span><span></span>></span></span></span></span>

Pertama, anda perlu memasang hendal di seluruh dunia dengan menggunakan hendal pemasangan NPM -G. Sila, pastikan templat yang berbeza ditulis dalam fail berasingan dengan nama fail yang berbeza dan dengan sambungan .handlebars (contohnya demo.handlebars). Tidak perlu menggunakan tag di dalam fail tersebut.

Sekarang simpan semua fail templat dalam satu folder bernama templat. Anda boleh menggunakan mana -mana nama folder yang anda kehendaki tetapi jika anda berbuat demikian, jangan lupa untuk menukar arahan berikut dengan sewajarnya. Oleh itu, buka terminal dan laksanakan perintah:

Perintah ini akan menghasilkan fail bernama templatescompiled.js yang mengandungi semua templat yang disusun. Pengkompil akan memasukkan templat dalam handlebars.templates. Jika fail input adalah demo.handlebars, maka ia akan dimasukkan ke handlebars.templates.demo

<span><!-- I am learning {{language}} -->I am learning {{language}}. It is {{!--adjective--}}</span>

Sekarang kita perlu memasukkan templatescompiled.js dalam fail HTML sebagai skrip biasa. Adalah penting untuk diperhatikan bahawa kita tidak perlu memuatkan keseluruhan perpustakaan hendal kerana pengkompil itu sendiri tidak diperlukan lagi. Kita boleh menggunakan "runtime" yang lebih kecil sebaliknya:

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

sekarang kita boleh menggunakan templat yang pada asalnya hadir dalam demo.handlebars dengan menggunakan kod berikut:

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

output akhir akan menjadi seperti berikut:
Kaedah ini akan meningkatkan prestasi aplikasi dan masa pemuatan halaman juga berkurangan kerana kami menggunakan runtime binaan hendal yang lebih ringan daripada seluruh perpustakaan.

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

Kod demo precompilation ini boleh didapati di GitHub.

KESIMPULAN

Dalam artikel ini kita telah membincangkan konsep asas hendal. Kami juga mengkaji fungsi dan sintaks yang sering digunakan. Saya harap anda menikmati tutorial ini dan anda akan menggunakan demo yang disertakan untuk memahami topik ini. Saya tidak sabar untuk membaca komen anda.
Sekiranya anda tidak mahu memuat turun perpustakaan tetapi anda masih mahu mencubanya, anda boleh bermain dengan hendal dalam talian di http://tryhandlebarsjs.com/.
Soalan Lazim Mengenai Hendal
Apa yang digunakan oleh handlebars.js? Ia membolehkan penciptaan templat yang boleh diguna semula dengan ruang letak (hendal) untuk penyisipan data. Perpustakaan ini memudahkan pengikatan data dua hala, membolehkan templat untuk mengemas kini secara automatik apabila perubahan data. Pemaju biasanya menggunakan handlebars.js untuk rendering sisi klien, logik bersyarat, dan lelaran data. Ia menggalakkan pemisahan kebimbangan antara struktur dan data HTML, menjadikannya alat yang berharga untuk membina aplikasi web interaktif dan data yang didorong oleh data sambil meningkatkan keupayaan dan keselamatan kod. > Handlebar biasanya digunakan bersempena dengan HTML, bukan sebagai pengganti. Ia menawarkan beberapa kelebihan apabila digabungkan dengan HTML, termasuk pengikatan data dinamik, kebolehgunaan semula kod, pemisahan yang jelas mengenai kebimbangan antara pembentangan dan data, penyampaian sisi klien, konsistensi dalam penjanaan kandungan, keselamatan yang dipertingkatkan melalui pemisahan kod, dan sokongan untuk penyetempatan. Faedah -faedah ini secara kolektif menjadikan hendal sebagai alat yang berharga untuk membina aplikasi web yang dinamik dan boleh dipelihara sementara masih bergantung pada HTML untuk menentukan struktur asas laman web. , Hendal tidak ditutup, dan ia tetap menjadi perpustakaan templating JavaScript yang boleh digunakan dan digunakan secara meluas dalam pembangunan web.

Apakah template hendal?

Templat Handlebars adalah struktur berasaskan teks yang mentakrifkan susun atur dan struktur kandungan HTML dinamik dalam pembangunan web. Handlebars adalah perpustakaan templating JavaScript yang membolehkan anda membuat templat ini, menjadikannya lebih mudah untuk menghasilkan kandungan HTML berdasarkan data. Handlebar ini disertakan dalam pendakap keriting berganda {{}}. Contohnya:



Hello, {{name}}!



Dalam template handlebar mudah ini, {{name}} adalah pemegang tempat untuk pembolehubah yang disebut "Nama . " Apabila anda membuat templat ini dengan data tertentu, seperti {name: "John"}, hendal menggantikan {{name}} dengan nilai data yang sepadan:



Hello, John!



templat hendal sangat berguna untuk mewujudkan kandungan HTML yang konsisten dan dikekalkan, kerana mereka memisahkan persembahan (struktur HTML) dari data, menjadikannya lebih mudah untuk mengemaskini dan menggunakan semula template di seluruh aplikasi web anda. Handlebars menawarkan ciri -ciri yang lebih canggih, menjadikannya sesuai untuk keperluan dan projek templat yang kompleks di mana ekosistem dan sokongan komuniti yang lebih besar adalah penting. Misai, sebaliknya, lebih mudah dan mengikuti falsafah "kurang logik", menjadikannya pilihan yang baik untuk projek-projek yang mengutamakan kesederhanaan dan mudah alih di pelbagai bahasa pengaturcaraan.

Atas ialah kandungan terperinci Panduan pemula ' s ke hendal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!