Abbiamo interrotto l'ultimo video con un po 'di confusione. In un unico blocco di JavaScript, stavamo mescolando il recupero dei dati, la visualizzazione, la logica di business e la creazione di modelli. In questo video inizieremo a suddividere queste cose per portarci a un codice più organizzato, manutenibile e comprensibile. Una parte importante di questo è la creazione di modelli.
Prendi il primo posto nella nostra avventura di creazione di modelli con Manubri. Handlebars ha un approccio intelligente in quanto l'HTML per il modello è letteralmente inserito nell'HTML. Usi un tag speciale . È utile per l'authoring perché possiamo allontanarci dalla goffaggine della concatenazione di stringhe (tutte quelle citazioni e vantaggi) e ottenere la bella evidenziazione della sintassi per l'HTML fornito dal tuo editor. Il nostro modello alla fine assomigliava a questo:
((movieTitle))
((movieDirector))
Nota l' typeattributo strano sul tag dello script. Ciò impedisce l'esecuzione del contenuto di quel tag. Alla fine, Handlebars strappa semplicemente il coraggio di questo tag e lo trasforma in una funzione modello. Un modo abbastanza intelligente per gestirlo davvero.
Quei pezzi come ((movieTitle))sono le parti importanti. Alla fine passiamo un oggetto alla funzione di template che viene creata e le proprietà di quell'oggetto corrispondono a questi bit segnaposto. Il manubrio è chiamato manubrio, presumibilmente, perché quei bit segnaposto sono avvolti in parentesi graffe che sembrano un po 'manubri dall'alto.
Seguendo il semplice tutorial sul sito web di Manubri, creiamo la nostra funzione di template in questo modo:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Quindi all'interno del nostro forciclo, chiamiamo la nostra nuova funzione di template con l'oggetto (il contesto) che contiene un singolo film. L'HTML verrà restituito e lo aggiungeremo alla pagina.
var html = template(data.movies(i)); $("#movies").append(html);Prendiamo anche il modello in questo video e lo filmiamo su una penna diversa. Ciò significa solo come probabilmente spezzeresti il tuo codice in un progetto reale. Il modello sarebbe quasi certamente un "include" di qualche tipo.
Ecco dove siamo finiti:
Guarda il Pen mdCjJ di Chris Coyier (@chriscoyier) su CodePen
Abbiamo fatto dei buoni passi qui verso un codice migliore, ma abbiamo ancora molto da fare per pulirlo perfettamente.