Kami tinggalkan di video terakhir dengan sedikit kekacauan yang kusut. Semua dalam satu blok JavaScript kami menggabungkan pengambilan data, tampilan dan logika bisnis, dan template. Dalam video ini kita akan mulai memecah hal-hal itu untuk membawa kita menuju kode yang lebih teratur, dapat dipelihara, dan dapat dimengerti. Sebagian besar dari itu adalah pembuatan template.
Ambil # 1 dalam petualangan templating kami dengan Handlebars. Setang memiliki pendekatan yang cerdas karena HTML untuk template secara harfiah dimasukkan ke dalam HTML. Anda menggunakan tag khusus . Itu membuat penulisan yang bagus karena kita bisa melepaskan diri dari kecanggungan rangkaian string (semua tanda kutip dan plus) dan mendapatkan penyorotan sintaks yang bagus untuk HTML yang disediakan editor Anda. Template kami pada akhirnya terlihat seperti ini:
((movieTitle))
((movieDirector))
Perhatikan typeatribut aneh pada tag script. Itu mencegah konten tag itu dijalankan. Pada akhirnya Handlebars hanya mencabut isi dari tag ini dan mengubahnya menjadi fungsi template. Cara yang cukup pintar untuk mengatasinya kok.
Bagian-bagian seperti itu ((movieTitle))adalah bagian penting. Kami akhirnya meneruskan objek ke fungsi templating yang dibuat, dan properti objek tersebut cocok dengan bit placeholder ini. Setang dinamai setang, mungkin, karena bit pengganti tersebut dibungkus dengan kawat gigi keriting yang terlihat seperti setang dari atas.
Mengikuti tutorial sederhana di situs web Handlebars, kami membuat fungsi templating kami seperti ini:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Kemudian dalam forloop kami , kami memanggil fungsi template baru kami dengan objek (konteks) yang berisi satu film. HTML akan dikembalikan, dan kami menambahkannya ke halaman.
var html = template(data.movies(i)); $("#movies").append(html);Kami juga mengambil templat dalam video ini dan merekamnya ke Pena yang berbeda. Itu hanya menandakan bagaimana Anda kemungkinan besar akan memecah kode Anda sendiri dalam proyek nyata. Template hampir pasti akan menjadi "termasuk" dari beberapa jenis.
Di sinilah kami berakhir:
Lihat Pen mdCjJ oleh Chris Coyier (@chriscoyier) di CodePen
Kami telah membuat beberapa langkah bagus di sini menuju kode yang lebih baik, tetapi kami memiliki lebih banyak hal untuk membuatnya sangat bersih.