Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Pengantar ke Handlebars

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Yusuf Samin (you can also view the original English article)

Jika data situs secara teratur berubah, maka Anda mungkin ingin melihat pada Handlebars. Handlebars adalah template prosesor yang secara dinamis menghasilkan halaman HTML Anda, menghemat waktu melakukan pembaruan manual. Dalam tutorial ini, saya akan memperkenalkan Anda ke Handlebars, dan mengajarkan Anda bagaimana untuk membuat dasar template untuk situs Anda.


Situs Template

Ada dua alasan utama mengapa Anda ingin membuat template untuk situs Anda. Pertama, membangun template yang mendorong Anda untuk memisahkan logika berbasis kode dari tampilan sebenarnya, membantu Anda mengikuti pattern View/Controller. Kedua, template menjaga kode Anda bersih dan maintainable, yang, pada gilirannya, membuat proses update situs Anda mudah. Anda tidak membuat sebuah situs dengan Handlebars. Sebaliknya, Anda membuat pedoman dan struktur yang mendikte bagaimana situs akan terlihat tanpa berfokus pada halaman data. Mari kita membahas beberapa dari dasar-dasar.


Dasar-dasar

Handlebars menghasilkan HTML Anda dengan mengambil struktur JSON dan menjalankannya melalui template. Template ini ditulis sebagian besar dalam HTML biasa, dan dibumbui dengan pengganti yang memungkinkan Anda untuk menyuntikkan data, seperti yang diperlukan. Misalnya, template berikut menyapa pengguna ketika mereka log in:

Atribut {{name}} adalah dimana nama pengguna akan disuntikkan ke halaman. Pengganti ini sesuai dengan properti dalam struktur data JSON. Ini adalah contoh paling mendasar yang tersedia, tetapi Anda akan segera melihat bahwa segala sesuatu yang lain pada dasarnya bermuara pada konsep sederhana ini. Mari kita beralih ke penanganan array.

Array

Handlebars dilengkapi dengan helper beberapa built-in untuk membantu Anda dalam bekerja dengan data yang lebih kompleks. Ini adalah helper each. helper ini iterates melalui array dan memungkinkan Anda untuk membuat HTML, setiap elemen array. Misalnya, template berikut Menampilkan sebuah array data yang berisi daftar konser lokal yang bermain di daerah saya:

Seperti yang Anda lihat, kode ini jauh lebih bersih daripada kode konvensional, seperti menggunakan loop di PHP atau JavaScript untuk menambahkan HTML ke variabel. Handlebars tidak mengganggu, dan ini adalah apa yang membuat Handlebars begitu mudah diakses. Anda juga dapat melihat bahwa kita menggunakan atribut nama, this, untuk mengambil elemen array saat ini dalam loop each.

Contoh ini baik untuk sebuah array nilai sederhana, tapi bagaimana Anda menangani data yang lebih kompleks? Nah, Anda pada dasarnya melakukan hal yang sama. Sebagai contoh, kita akan menulis template untuk data sebagai berikut:

Kita dapat dengan mudah menampilkan informasi ini menggunakan template berikut:

Anda dapat menyimpan template Anda di <script/> elemen dan muat itu dengan javascript

Di Handlebar, Anda dapat bahkan akses bersarang properti, seperti dalam contoh di atas (Albums.0.Name), dan tentu saja, Anda bisa menggunakan each loop untuk atas album band. Perlu dicatat bahwa selain notasi titik untuk mengakses properti yang bersarang, Anda juga dapat menggunakan "... / "untuk mengakses properti parent.

Bagaimana jika tidak ada band-band bermain? Anda tentu tidak ingin sebuah tabel kosong, dan Handlebars unntungnya menyediakan if, else dan unless helper. if dan else pernyataan bekerja seperti kebanyakan bahasa pemrograman: jika objek Anda lulus false atau falsey, maka mengeksekusi pernyataan else. Sebaliknya, if pernyataan mengeksekusi. unless pernyataan cukup menarik; Hal ini pada dasarnya terbalik if pernyataan. Jika ekspresi true, unless blok tidak akan dijalankan. Jadi mari kita memasukkan helper ini ke dalam kode kita:

Custom Helpers

Handlebars memberi Anda kemampuan untuk membuat helper kustom Anda sendiri. Cukup mendaftar fungsi Anda ke Handlerbars, dan apapun template yang Anda mengkompilasi kemudian dapat mengakses helper Anda. Ada dua jenis helper yang dapat Anda buat:

  • Function helpers adalah fungsi pada dasarnya biasa yang, setelah terdaftar, dapat dipnaggil di mana saja dalam template Anda. Handlebars menulis nilai kembalian fungsi ke dalam template.
  • Block Helpers sama dengan, if, each helper dll. Mereka memungkinkan Anda untuk mengubah konteks dari apa yang ada di dalamnya.

Biarkan saya menunjukkan kepada Anda sebuah contoh cepat dari masing-masing. Pertama, saya akan mendaftar helper fungsi dengan kode berikut:

Argumen pertama dilewatkan ke registerHelper() adalah nama saya pelanggan helper; Saya akan menggunakan nama ini dalam template. Argumen kedua adalah fungsi yang dikaitkan dengan helper ini.

Menggunakan helper ini dalam sebuah template ini sangat sederhana:

Template ini menggunakan helper Max, dan melewati nilai 12 dan 45 ke fungsi terkait. Hanlerbars fungsi helper mendukung beberapa parameter. Anda dapat langsung memasukkan angka ke dalam template itu sendiri, atau Anda dapat menggunakan atribut dari struktur JSON.

Sekarang mari kita lihat helper kustom blok. Blok helper memungkinkan Anda untuk mengatur konteks sebelum menjalankan suatu code yang terkandung dalam blok. Sebagai contoh, pertimbangkan objek berikut:

Untuk menampilkan kedua nama, Anda dapat menulis blok helper yang menjalankan template sekali dengan parent konteks, dan sekali dengan konteks child. Berikut adalah helper:

Dan template yang terlihat seperti ini:

Hash tag sebelum nama helper mengatakan Handlebars ini adalah helper blok, dan Anda menutup blok tidak seperti Anda akan HTML tag. Fungsi options.fn menjalankan bagian dari template di dalam blok dengan konteks apapun Anda memberikannya.

Sekarang bahwa kita memiliki dasar-dasar bawah, mari kita mulai membuat demo penuh.


Membangun Template situs

Anda tidak membuat sebuah situs dengan Handlebars.

Adalah template yang kita akan membangun situs resep. Ini akan memberi Anda pemahaman Handlerbars, dievaluasi mendapatkan data dari API yang baik dan melewati sebuah template.

Menyiapkan sebuah proyek Handlebars

Kami pertama kali harus memuat script template kami, tetapi untuk melakukan itu, kita perlu membuat sebuah file HTML yang baru dan memasukan Perpustakaan Handlebars kami:

Untuk kenyamanan Anda, Anda dapat menyimpan template Anda di <script/> elemen dan muat dengan javascript Ini jauh lebih bersih daripada menyimpannya secara langsung dalam variabel JavaScript.

Sekarang mari kita bahas bagaimana aplikasi ini akan bekerja. Pertama, aplikasi menghubungkan ke API (saya menggunakan Yummly) untuk menarik informasi tentang beberapa resep. Selanjutnya, kami melewati info ini ke Handlebars dan menjalankannya melalui template. Akhirnya, kami mengganti bagian body dengan HTML baru yang dihasilkan. Ini adalah proses yang cukup lurus ke depan; Jadi, mari kita mulai dengan menambahkan script blok kedua tepat sebelum penutupan body tag, dan instantiate sebuah Ajax variabel:

Jika data situs secara teratur perubahan, maka Anda mungkin ingin melihat pada Handlebars.

Ini adalah kode lengkap untuk kompilasi dan menghasilkan kode HTML dari template. Anda secara teknis dapat memasukan JSON data dari API langsung ke Handlebars, tetapi Anda lari ke masalah cross origin. Bukannya melakukan semacam hack atau menggunakan PHP untuk "echo" data ke dalam variabel JavaScript, saya memutuskan untuk meletakkan semua itu ke dalam sebuah file terpisah: Recipe.php. Jadi sebelum kita mulai membangun template, mari kita pergi Lihatlah PHP file.

Mendapatkan Data

Yummly API ini cukup sederhana. Ada tidak ada sistem otentikasi rumit; Anda hanya perlu mendaftar, mendapatkan beberapa kredensial dan memasukkan mereka ke dalam URL. Anda langsung dapat echo data jika Anda ingin, tetapi saya ingin sedikit lebih detail info pada setiap resep. Oleh karena itu, saya akan memproses data dari panggilan API pertama dan membuat permintaan kedua untuk setiap resep. Berikut adalah skrip PHP lengkap:

Dengan membangun situs Anda dengan H anldebars template, Anda dapat menghasilkan sebuah situs penuh senilai kode hanya dalam beberapa baris. Berikut adalah seluruh template:

Mari kita jalankan melalui kode ini. Tujuh baris pertama adalah hanya logo di bagian atas halaman. Kemudian untuk setiap resep, kami membuat resep 'card' dengan gambar, nama, dan bahan-bahan.

Yummly API mengembalikan daftar rasa data (yaitu bagaimana manis, asam, pedas, dll) untuk setiap item. Saya menulis fungsi helper, disebut getFlavor yang mengambil info ini dan mengembalikan rasa yang paling dominan dalam piring. Dalam rangka untuk template ini untuk bekerja, kita perlu memuat di helper getFlavor ke Handlebar sebelum melakukan penguraian template. Jadi pada awal bagian skrip kedua, tambahkan kode berikut sebelum kode Ajax:

Sekarang, setiap kali Handlebar melihat getFlavor, itu memanggil fungsi terkait dan mengambil informasi rasa.

Pada titik ini, Anda akan bebas untuk bermain-main dan desain template namun Anda inginkan, tetapi Anda kemungkinan akan melihat bahwa proses ini lambat. Hal ini terutama karena tiga API panggilan sebelum Handlebars memuat halaman. Jelas, hal ini tidak ideal, tetapi precompiling template Anda dapat membantu.


Precompiling

Anda memiliki dua pilihan yang berbeda, ketika datang ke Handlebar. Yang pertama adalah untuk hanya precompile template sebenarnya. Hal ini mengurangi waktu-loading, dan Anda tidak perlu menyertakan kompilator Handlebars dengan halaman Anda.

Hal ini juga menghasilkan ukuran file yang lebih kecil, tetapi ini tidak benar-benar membantu dalam skenario kami.

Masalah kita adalah komunikasi antara browser dan API. Jika Anda memang ingin precompile template Anda, Anda dapat men-download paket Node.js melalui npm dengan perintah berikut:

Anda mungkin perlu untuk melakukan hal ini sebagai root (yaitu menambahkan 'sudo' sebelum perintah). Setelah terinstal, Anda dapat membuat file untuk template Anda dan compile seperti:

Anda harus memberikan file template Anda sebuah ekstensi .handlebars. Hal ini tidak wajib, tetapi jika Anda nama itu sesuatu seperti demo.html, maka nama template akan "demo.html" sebagai apposed ke hanya "demo". Setelah penamaan template Anda, hanya menyertakan file output dengan versi run-time handlebar (Anda dapat menggunakan versi biasa, tetapi memiliki lebih besar) dan ketik berikut:

unless pernyataan is... pada dasarnya terbalik if pernyataan.

Tapi, seperti yang saya sebutkan sebelumnya, ini tidak benar-benar membantu kami dalam skenario ini. Apa yang kemudian bisa kita lakukan? Yah, kita dapat precompile dan output seluruh file. Hal ini sehingga kami dapat menjalankan template dengan data dan menyimpan HTML akhir output - caching, dengan kata lain. Ini secara drastis mempercepat waktu buka aplikasi Anda. Sayangnya, sisi klien JavaScript tidak memiliki kemampuan file IO. Jadi, cara termudah untuk melakukannya adalah untuk hanya output HTML ke kotak teks dan menyimpannya secara manual. Menyadari API pedoman caching. Kebanyakan api memiliki jumlah maksimum waktu bahwa data dapat di-cache Pastikan untuk menemukan bahwa informasi sebelum menyimpan halaman statis.


Kesimpulan

Ini telah menjadi pengantar singkat Handlebars. Bergerak maju, Anda dapat melihat ke dalam "partials" - kecil template yang dapat digunakan seperti fungsi. Seperti biasa, merasa bebas untuk meninggalkan komentar atau pertanyaan di bagian komentar di bawah ini.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.