U posljednjem smo videu stali s pomalo zamršenim neredom. Sve u jednom bloku JavaScript-a miješali smo pronalaženje podataka, prikaz i poslovnu logiku te predloške. U ovom ćemo videozapisu započeti razbijanje tih stvari kako bismo krenuli prema organiziranijem, održivijem i razumljivijem kodu. Veliki dio toga čine predlošci.
Zauzmite 1. mjesto u našoj templating avanturi s upravljačima. Ručke imaju pametan pristup u tome što se HTML za predložak doslovno stavlja u HTML. Koristite posebnu oznaku. To čini lijepo autorsko djelovanje jer možemo pobjeći od nespretnosti spajanja nizova (svi oni citati i dodaci) i dobiti lijepo isticanje sintakse za HTML koji nudi vaš uređivač. Naš predložak je u konačnici izgledao ovako:
((movieTitle))
((movieDirector))
Obratite pažnju na čudan typeatribut na oznaci skripte. To sprječava izvršavanje sadržaja te oznake. Konačno, Handlebars samo istrgne crijeva ove oznake i pretvori je u funkciju predloška. Prilično pametan način da se to stvarno riješi.
Ti dijelovi poput ((movieTitle))su važni dijelovi. U konačnici prosljeđujemo objekt funkciji predloška koja se kreira, a svojstva tog objekta odgovaraju tim bitovima rezerviranih mjesta. Krmilo je vjerojatno nazvano upravljač, jer su oni bitovi rezerviranih mjesta umotani u kovrčave zagrade koje odozgo izgledaju poput upravljača.
Slijedeći jednostavne upute na web mjestu Handlebars, kreiramo našu funkciju predloška poput ove:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Zatim unutar naše forpetlje pozivamo našu novu funkciju predloške s objektom (kontekstom) koji sadrži jedan film. HTML će biti vraćen i mi ćemo ga dodati na stranicu.
var html = template(data.movies(i)); $("#movies").append(html);Također uzmemo predložak u ovom videu i snimamo ga na drugu olovku. To samo znači kako biste vjerojatno razbili vlastiti kôd u stvarnom projektu. Predložak bi gotovo sigurno bio neka vrsta "uključuju".
Evo gdje smo završili:
Pogledajte Pen mdCjJ Chrisa Coyiera (@chriscoyier) na CodePenu
Ovdje smo postigli nekoliko dobrih koraka prema boljem kodu, ali moramo ga još učiniti kako bi bio savršeno čist.