Template adalah bagian dari HTML yang perlu Anda masukkan ke halaman. Seringkali template dibuat "sisi server" - yang datang ke JavaScript dalam bentuk penuh dan hanya perlu dimasukkan ke DOM. Namun terkadang hal itu tidak mungkin atau akan memerlukan dan perjalanan bolak-balik ekstra ke server yang mungkin lambat. Dalam hal ini, memiliki template di JavaScript sangat ideal. Anda tentu saja dapat melakukan sedikit penggabungan string dengan menambahkan bit HTML dan data sampai Anda memiliki template yang Anda butuhkan. Tapi itu sepertinya tidak ideal karena tidak memisahkan masalah data dan template. Template JavaScript nyata dapat membantu di sini.
Dalam screencast ini kita akan membahas “mengapa” dasar dari pembuatan template JavaScript dan kemudian secara khusus membahas contoh sederhana bagaimana hal itu dilakukan di Underscore.js. Kemudian kami akan membahas beberapa alternatif lain.
Demo
var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);Lihat Pen% = penName%> oleh Chris Coyier (@chriscoyier) di CodePen
Tautan
- Demo Dasar di CodePen
- Underscore.js Templating
- NetTuts: Praktik Terbaik Saat Bekerja Dengan Template JavaScript
- MDN: template JavaScript
- John Resig: JavaScript Micro-Templating
- James Padolsey: Interplasi langsung