Kami membahas pembuatan template dengan Handlebars di video terakhir. Tapi Handlebars bukan satu-satunya solusi template di blok tersebut. Dalam video ini kita akan menggunakan template yang tersedia di Underscore.
Mengapa? Salah satu alasannya adalah Anda mungkin sudah menggunakan Underscore pada proyek Anda. Ini adalah pustaka yang sangat populer karena, seperti jQuery, ini menyediakan banyak metode berguna yang bekerja lintas browser. Seperti yang mereka katakan:
Ini adalah dasi untuk mengikuti tux jQuery, dan suspender Backbone.js.
Jika Anda sudah menggunakan Underscore, itu akan menjadi insentif besar untuk menggunakan itu sebagai template.
Juga dalam pengujian cepat saya, Handlebars 1.0.0 adalah 14,2 KB gzip dan diperkecil dan Underscore adalah 4,9 KB gzip dan diperkecil. Setang memiliki lebih banyak fitur (mis. Berkomentar, loop, jalur, logika, dll). Dalam demo sederhana kami, kami tidak memerlukan fitur-fitur itu, jadi ini bukan perbandingan yang adil, tapi kami baru saja belajar.
Daripada memiliki template di HTML, kita perlu mendefinisikan template Underscore di JavaScript. Kami kembali ke beberapa rangkaian string.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledkemudian berubah menjadi fungsi yang dapat kita panggil dengan konteks objek data kita dan mengembalikan HTML yang diisi dengan data itu. Agar efisien, kami akan menggabungkan HTML yang kembali menjadi satu string besar sehingga kami dapat menambahkannya ke DOM hanya sekali:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);Dalam video ini kami juga mengabstraksi cara mendapatkan data. Kami membuat sumber JSON, dan menggunakan fungsi $ .getJSON () jQuery untuk mendapatkannya. Seperti yang mungkin harus kita lakukan dalam "kehidupan nyata".
$.getJSON("/path/to/json.js", function(data) ( ));Perulangan for kami dan semacamnya yang bergantung pada data tersebut masuk dalam callback di sana. Atau lebih mungkin, memanggil beberapa fungsi lain yang dinamai baik untuk menanganinya, menjaga agar semuanya tetap terpisah.
Di sinilah kami berakhir:
Lihat Pen IpAdn oleh Chris Coyier (@chriscoyier) di CodePen
Perlu dicatat bahwa LoDash 100% kompatibel dengan apa yang telah kami lakukan di sini. Saya tidak yakin apakah template LoDash lebih baik / lebih cepat / lebih lambat / lebih buruk daripada Underscore, tapi saya menukar perpustakaan dan demo berfungsi dengan baik.