Share
Een tijdje geleden heb ik je laten zien hoe je de plug-in jQuery-template in een snelle tip gebruikt; in deze snelle tip laat ik je zien hoe je een andere sjabloonbibliotheek, Moustache, kunt gebruiken, die net zo gemakkelijk te gebruiken is.
Je kunt Moustache.js krijgen via de GitHub-projectpagina; als je het in een project gaat gebruiken, kun je het downloaden of git clone het; Ik heb zojuist verwezen naar het onbewerkte bestand op GitHub voor deze snelle tip:
Nu kunt u het gebruiken om gegevens weer te geven!
Hoogstwaarschijnlijk krijgt u uw gegevens van de server in de vorm van JSON wanneer u Moustache gebruikt tijdens de productie. Het is echter net zo eenvoudig om een object letterlijk te coderen en dat te gebruiken, wat we hier zullen doen.
Accentsconagua
var data = name: "Some Tuts + Sites", sites: ["Nettuts +", "Psdtuts +", "Mobiletuts +"], url: function () return function (text, render) text = render (text); var url = text.trim (). toLowerCase (). splitsen ('tuts +') [0] + '.tutsplus.com'; return '' + text + ''; ; Nu zijn we klaar om de sjabloon te definiëren.
Uw sjabloon is eenvoudig een tekenreeks; je kunt een normale oude JavaScript-string gebruiken, of je kunt de template in een script-tag plaatsen en deze krijgen via iets als jQuery's html () methode (of, natuurlijk, innerHTML). Dit is waarschijnlijk een betere keuze als u een ingewikkelde sjabloon gebruikt, omdat u regeleinden kunt gebruiken. Vergeet niet om het script een ander type te geven dan "text / javascript"; Anders kunnen browsers proberen het te interpreteren, en dat zal fouten veroorzaken.
Uw sjabloon zal voornamelijk HTML zijn; wanneer u een waarde uit uw gegevens wilt gebruiken, verwijs dan naar de sleutelnaam van de waarde in de gegevens. Om de te gebruiken naam waarde in de bovenstaande gegevens, zou je het als volgt verwijzen:
naam
Blokken zijn een belangrijk stuk Moustache: je kunt ze gebruiken om in reeksen en objecten te komen, evenals voor lambda's (functies). Het is vrij eenvoudig om blokken te doen: gebruik gewoon een openende en sluitende tag: de eerste begint met een pond (#) en de laatste met een schuine streep (/).
Als u itereert over arrays, krijgt de impliciete operator "." De waarde. Als plaatsen was een object, je zou de toetsen in het blok gebruiken.
Het gebruik van functies is iets lastiger. Voor het gegevensgedeelte heeft Moustache.js een functie nodig dat komt terug de functie die moet worden gebruikt. Die functie krijgt de te genereren tekst doorgegeven (alle tekst binnen de snick-functie-tags) en een functie waarmee de sjabloontags in de tekst worden weergegeven. Vervolgens, wat die functie ook oplevert, wordt in de tags geplaatst. Je kunt dit aan het werk zien in de urls functie in de bovenstaande gegevens.
Het is heel eenvoudig om de HTML te renderen:
html = Mustache.to_html (sjabloon, gegevens);
Vervolgens kunt u die HTML-code plakken waar u maar wilt.
var data, template, html; data = name: "Some Tuts + Sites", sites: ["Nettuts +", "Psdtuts +", "Mobiletuts +"], url: function () return function (text, render) text = render (text); var url = text.trim (). toLowerCase (). splitsen ('tuts +') [0] + '.tutsplus.com'; return '' + text + ''; ; template = " naam
Raadpleeg de website voor meer informatie over Moustache. Veel plezier ermee!
