Share
För en tid sedan visade jag dig hur du använder jQuery-mallinställningen i en snabb spets; I det här snabba tipset visar jag dig hur du använder ett annat mallbibliotek, mustasch, som är lika lätt att använda.
Du kan få Mustache.js från sin GitHub-projektsida; Om du ska använda det i ett projekt kan du ladda ner det eller git klon Det; Jag har just refererat till den råa filen på GitHub för detta snabba tips:
Nu kan du använda den för att göra data!
Mest troligt kommer du att få dina data från servern i form av JSON när du använder mustasch i produktion. Men det är lika lätt att hårdkoda ett objekt bokstavligt och använda det, vilket är vad vi ska göra här.
Accentsconagua
var data = namn: "Några Tuts + Sites", webbplatser: ["Nettuts +", "Psdtuts +", "Mobiletuts +"], url: funktion () returfunktion (text, render) text = render var url = text.trim (). toLowerCase (). split ('tuts +') [0] + '.tutsplus.com'; returnera '' + text + ''; ; Nu är vi redo att definiera mallen.
Din mall är helt enkelt sträng; du kan antingen använda en vanlig gammal JavaScript-sträng, eller du kan lägga mallen i en skriptikett och hämta den via något som jQuery s html() metod (eller, naturligtvis, innerhtml). Det här är förmodligen ett bättre val om du använder en komplicerad mall, eftersom du kan använda radbrytningar. Kom bara ihåg att ge skriptet en typ av något annat än "text / javascript"; Annars kan webbläsare försöka tolka det, och det kommer att orsaka fel.
Din mall kommer huvudsakligen att vara HTML; När du vill använda ett värde från dina data hänvisar du till nyckelnamnet på värdet i data. Att använda namn värdet i data ovan, skulle du referera till det så här:
namn
Block är en viktig bit av mustasch: du kan använda dem för att komma in i arrays och föremål, liksom för lambdas (funktioner). Det är ganska enkelt att göra block: använd bara en öppnings- och stängningskod: öppningen börjar med ett pund (#) och den sista med en snedstreck (/).
När iterering över arrays kommer den implicita operatören "." Att få dig värdet. Om webbplatser var ett objekt, du skulle använda det nycklarna inuti blocket.
Att använda funktioner är lite mer knepigt. För datadelen kräver Mustache.js en funktion som återvänder Funktionen som ska användas. Den funktionen passerar den text som ska göras (all text inom mustaschfunktionstaggarna) och en funktion som gör malltaggarna inuti texten. Då kommer vad som helst som returneras att läggas in i taggarna. Du kan se detta på jobbet i webbadresser funktionen i uppgifterna ovan.
Det är verkligen enkelt att göra HTML:
html = Mustache.to_html (mall, data);
Då kan du hålla den HTML där du vill.
var data, mall, html; data = name: "Some Tuts + Sites", webbplatser: ["Webuts +", "Psdtuts +", "Mobiletuts +"], url: funktion () returfunktion (text, render) text = render var url = text.trim (). toLowerCase (). split ('tuts +') [0] + '.tutsplus.com'; returnera '' + text + ''; ; mall = " namn
För att lära dig mer om mustasch, kolla in webbplatsen. Ha kul med det!
