Kami berhenti dalam video terakhir dengan sedikit kekacauan. Semua dalam satu blok JavaScript kami menggabungkan pengambilan data, paparan dan logik perniagaan, dan templat. Dalam video ini kita akan mula memecahkan perkara-perkara itu untuk membuat kita menuju kod yang lebih teratur, dapat dikekalkan, dan difahami. Sebahagian besar dari itu adalah templat.
Ikuti # 1 dalam templat templat kami dengan Handlebars. Handlebars mempunyai pendekatan yang bijak kerana HTML untuk templat secara harfiah dimasukkan ke dalam HTML. Anda menggunakan teg khas . Ini membuat pengarang yang bagus kerana kita dapat menjauhkan diri dari kekokohan penggabungan rentetan (semua petikan dan petikan itu) dan mendapatkan sorotan sintaks yang bagus untuk HTML yang disediakan oleh editor anda. Templat kami akhirnya kelihatan seperti ini:
((movieTitle))
((movieDirector))
Perhatikan typeatribut pelik pada tag skrip. Itu menghalang kandungan tag tersebut daripada dijalankan. Handlebars akhirnya mengeluarkan inti dari tag ini dan mengubahnya menjadi fungsi templat. Cara yang cukup bijak untuk mengatasinya dengan betul.
Bit seperti itu ((movieTitle))adalah bahagian penting. Kami akhirnya menyampaikan objek ke fungsi templat yang dibuat, dan sifat objek itu sesuai dengan bit tempat ini. Handlebars dinamakan hendal, mungkin, kerana bit tempat letaknya dibalut dengan pendakap keriting yang kelihatan sedikit seperti hendal dari atas.
Mengikuti tutorial ringkas di laman web Handlebars, kami membuat fungsi templat kami seperti ini:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Kemudian dalam forlingkaran kami , kami memanggil fungsi templat baru kami dengan objek (konteks) yang berisi satu filem. HTML akan dikembalikan, dan kami menambahkannya ke halaman.
var html = template(data.movies(i)); $("#movies").append(html);Kami juga membawa templat dalam video ini dan menayangkannya ke Pen yang berbeza. Itu hanya menunjukkan bagaimana anda mungkin memecahkan kod anda sendiri dalam projek sebenar. Templat ini pastinya akan menjadi "termasuk" dari beberapa jenis.
Di sinilah kami akhirnya:
Lihat Pen mdCjJ oleh Chris Coyier (@chriscoyier) di CodePen
Kami telah membuat beberapa langkah baik di sini untuk mendapatkan kod yang lebih baik, tetapi kami masih perlu melakukan lebih banyak lagi untuk mendapatkannya dengan sempurna.