Share
For en stund siden viste jeg deg hvordan du bruker jQuery-malpluggen i et raskt tips; I dette raske tipset vil jeg vise deg hvordan du bruker et annet malbibliotek, mustasje, som er like enkelt å bruke.
Du kan få Mustache.js fra sin GitHub prosjektside; Hvis du skal bruke det i et prosjekt, kan du laste det ned eller git klon den; Jeg har nettopp referert til råfilen på GitHub for dette raske tipset:
Nå kan du bruke den til å gjengi data!
Mest sannsynlig vil du få dataene dine fra serveren i form av JSON når du bruker overskget i produksjon. Men det er like enkelt å hardkode et objekt bokstavelig og bruke det, noe som vi gjør her.
Accentsconagua
var data = navn: "Noen Tuts + Nettsteder", nettsteder: ["Nettuts +", "Psdtuts +", "Mobiletuts +"], url: funksjon () returfunksjon (tekst, gjengivelse) text = render var url = text.trim (). toLowerCase (). split ('tuts +') [0] + '.tutsplus.com'; returnere '' + tekst + ''; ; Nå er vi klare til å definere malen.
Malen din er rett og slett streng; Du kan enten bruke en vanlig gammel JavaScript-streng, eller du kan sette malen i et skript og få det via noe som jQuery s html () metode (eller, selvfølgelig, innerhtml). Dette er sannsynligvis et bedre valg hvis du bruker en komplisert mal, fordi du kan bruke linjeskift. Bare husk å gi skriptet en type noe annet enn "tekst / javascript"; ellers kan nettlesere prøve å tolke det, og det vil føre til feil.
Malen din vil hovedsakelig være HTML; Når du vil bruke en verdi fra dataene dine, refererer du nøkkelnavnet til verdien i dataene. For å bruke Navn verdi i dataene ovenfor, vil du referere til det slik:
Navn
Blokker er et viktig stykke mustache: du kan bruke dem til å komme inn i arrays og objekter, så vel som for lambdas (funksjoner). Det er ganske enkelt å gjøre blokker: Bruk bare en åpnings- og lukkekode: åpningen starter med et pund (#) og den avsluttende med en skråstrek (/).
Når iterating over arrayer, vil den implisitte operatøren "." Få deg verdien. Hvis sider var et objekt, du ville bruke det nøklene inne i blokken.
Å bruke funksjoner er litt vanskeligere. For data-delen krever Mustache.js en funksjon som returnerer funksjonen som skal brukes. Den funksjonen får passet teksten som skal gjengis (all teksten i overskytingsfunksjonskodene) og en funksjon som vil gjøre malteknappene inne i teksten. Så, hva som helst som returnerer, blir lagt inn i kodene. Du kan se dette på jobb i webadresser fungere i dataene ovenfor.
Det er veldig enkelt å gjengi HTML:
html = Mustache.to_html (mal, data);
Deretter kan du holde den HTML hvor du vil.
var data, mal, html; data = navn: "Noen Tuts + Nettsteder", nettsteder: ["Nettuts +", "Psdtuts +", "Mobiletuts +"], url: funksjon () returfunksjon (tekst, gjengivelse) text = render var url = text.trim (). toLowerCase (). split ('tuts +') [0] + '.tutsplus.com'; returnere '' + tekst + ''; ; mal = " Navn
For å lære mer om skjegg, sjekk ut nettstedet. Ha det gøy med det!
