Templating adalah bahagian penting dalam bekerja dengan aplikasi JavaScript. Sudah cukup umum bahawa data tersedia untuk anda, tetapi tidak dalam format yang siap dipaparkan di skrin. Itu adalah data biasa (tetapi tidak selalu) dalam format JSON. Itu adalah format yang bagus untuk digunakan dalam JavaScript, tetapi kita masih perlu memformatnya menjadi sesuatu yang dapat kita gunakan.
Sebagai contoh, berikut adalah beberapa data fiksyen yang mungkin kita miliki:
var data = ( movies: ( ( movieTitle: "Ender's Game", movieDirector: "Gavin Hood", movieImage: "http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg.webp" ),… ) )Dan akhirnya kami ingin menjadikannya:
Ender's Game
Gavin Hood
Anda mungkin menganggap jQuery sangat mengagumkan. jQuery penuh dengan alat DOM melintasi / manipulasi. Tetapi ia tidak mempunyai sekumpulan alat penciptaan DOM yang sangat kuat yang mungkin anda katakan. Saya percaya pasukan jQuery sedang mempertimbangkan untuk menambahkan templat pada suatu ketika, dan bahkan bermain dengan plugin "rasmi", tetapi ia tidak berjaya.
Dalam video ini, kita tidak melakukan apa yang secara tradisional dianggap sebagai templat. Kami terus membina baru dengan jQuery dan menggunakan gabungan rangkaian untuk membina HTML yang kami perlukan dan akhirnya memasukkannya ke halaman. Tidak ada yang tidak betul secara teknikal mengenai perkara itu, tetapi saya berusaha dan pulang bagaimana pendekatan ini dapat dilakukan dengan cepat.
Hanya dengan sedikit JS yang kami tulis dalam video ini, kami menggabungkan pelbagai masalah / pekerjaan:
- Mendapatkan data. Kami baru sahaja menggunakannya di sini, tetapi kemungkinan ini sedikit lebih rumit. Mungkin permintaan Ajax async dengan pengendalian ralat dan caching dan sebagainya.
- Logik paparan. Memutuskan apa yang perlu kita tunjukkan. Berapa banyak? Bahagian mana? Berdasarkan apa?
- Pengendalian acara. Div kami yang baru disuntik telah menambahkan pengendalian acara ketika kami membuatnya, dan bukannya mewakilkan.
- Templat. HTML yang kami buat untuk menyelesaikan reka bentuk, menyusun data, dan menampung atau keperluan.
Ini adalah kod spaghetti-ish yang kami selesaikan dengan:
Lihat Pen 31b07f30dce13b31904da36693b29b41 oleh Chris Coyier (@chriscoyier) di CodePen
Blok video seterusnya akan memfokuskan banyak templat kerana itu sangat penting, tetapi akhirnya kita akan memecahkan semua kebimbangan ini dan berakhir dengan kod yang lebih teratur dan dapat dikekalkan.