Predlošci su važan dio rada s JavaScript aplikacijama. Prilično je često da su vam podaci dostupni, ali ne u formatu koji je spreman za prikaz na zaslonu. To su uobičajeni (ali ne uvijek) podaci u JSON formatu. To je sjajan format za rad s JavaScriptom, ali svejedno ga moramo oblikovati u nešto što možemo koristiti.
Na primjer, evo nekoliko izmišljenih podataka koje bismo mogli imati pri ruci:
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" ),… ) )I na kraju bismo to htjeli pretvoriti u:
Ender's Game
Gavin Hood
Možda mislite da je jQuery u tome sjajan. jQuery je pun DOM alata za prelaženje / manipulaciju. Ali nema vrlo robustan set alata za stvaranje DOM-a, što biste mogli reći. Vjerujem da je jQuery tim u jednom trenutku razmišljao o dodavanju predložaka, čak se poigrao i "službenim" dodatkom, ali nije krenuo.
U ovom videu jednostavno ne radimo ono što se danas tradicionalno smatra predlošcima. Samo izrađujemo novo pomoću jQueryja i koristimo spajanje nizova za izgradnju HTML-a koji nam treba i na kraju ga ubrizgamo na stranicu. U tome nema ničega tehnički netočnog, ali pokušavam se odvesti kući kako ovaj pristup može brzo izmaknuti kontroli.
U samo malo JS-a koji pišemo u ovom videu miješamo razne probleme / poslove:
- Dobivanje podataka. Ovdje ga jednostavno imamo pri ruci, ali vjerojatno je ovo malo složenije. Možda asinkroni Ajaxov zahtjev s rukovanjem pogreškama i predmemoriranjem i slično.
- Logika prikaza. Odlučujući što trebamo pokazati. Koliko? Koji dijelovi? Na osnovu čega?
- Rukovanje događajima. Našim novo ubrizganim div-ovima dodano je rukovanje događajima dok smo ih kreirali, a ne delegiranje.
- Predlošci. HTML koji kreiramo za dizajn, strukturiranje podataka i prilagodbu ili potrebe.
Ovo je kod za špagete koji smo završili:
Pogledajte olovku 31b07f30dce13b31904da36693b29b41 Chrisa Coyiera (@chriscoyier) na CodePen
Sljedeći blok videozapisa usredotočit će se na predloške, jer je to vrlo važno, ali u konačnici ćemo nekako razbiti sve te brige i završiti s puno organiziranijim i održivijim kodom.