Kami merangkumi templat dengan Handlebars dalam video terakhir. Tetapi Handlebars bukan satu-satunya penyelesaian templat di blok tersebut. Dalam video ini kita akan menggunakan templat yang tersedia di Underscore.
Kenapa? Salah satu sebabnya ialah anda mungkin sudah menggunakan Underscore pada projek anda. Ini adalah perpustakaan yang sangat popular kerana, seperti jQuery, ia menyediakan banyak kaedah berguna yang berfungsi melalui penyemak imbas. Seperti yang mereka katakan:
Ini adalah ikatan yang sesuai dengan tux jQuery, dan suspender Backbone.js.
Sekiranya anda sudah menggunakan Underscore, itu akan menjadi insentif besar untuk menggunakan templat.
Dalam ujian pantas saya, Handlebars 1.0.0 ialah 14.2 KB gzip dan dikurangkan dan Underscore adalah 4.9 KB gzip dan dikurangkan. Handlebars hanya mempunyai lebih banyak ciri (misalnya memberi komen, gelung, jalan, logik, dll). Dalam demo ringkas kami, kami tidak memerlukan ciri-ciri itu, jadi ini bukan perbandingan yang tepat, tapi oh kami baru belajar.
Daripada mempunyai templat dalam HTML, kita perlu menentukan templat Underscore dalam JavaScript. Kami kembali ke penggabungan rentetan.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledkemudian berubah menjadi fungsi yang dapat kita panggil dengan konteks objek data kita dan mengembalikan HTML yang diisi dengan data tersebut. Untuk menjadi cekap, kami akan menggabungkan HTML yang kembali menjadi satu rentetan besar sehingga kami dapat menambahkannya ke DOM 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 menyingkirkan pengambilan data. Kami membuat sumber JSON, dan menggunakan fungsi $ .getJSON () jQuery untuk mendapatkannya. Seperti yang mungkin kita lakukan dalam "kehidupan nyata".
$.getJSON("/path/to/json.js", function(data) ( ));Kami untuk gelung dan yang bergantung pada data masuk dalam panggilan balik di sana. Atau lebih mungkin, memanggil beberapa fungsi lain yang terkenal untuk menanganinya, menjaga keadaan agar tetap terpisah.
Di sinilah kami akhirnya:
Lihat Pen IpAdn oleh Chris Coyier (@chriscoyier) di CodePen
Perlu diingatkan bahawa LoDash 100% serasi dengan apa yang telah kita lakukan di sini. Saya tidak pasti sama ada templat LoDash lebih baik / lebih cepat / lebih perlahan / lebih buruk daripada Underscore, tetapi saya menukar perpustakaan dan demo berfungsi dengan baik.