Snelle tip een inleiding tot jQuery Templating

JavaScript Templating is een goed idee: u kunt eenvoudig JSON naar HTML converteren zonder het te moeten parseren. Op Microsoft's MIX10-conferentie hebben ze aangekondigd dat ze een bijdrage gaan leveren aan het jQuery-team. Een van hun inspanningen is om een ​​plug-in voor sjabloneren te bieden. In deze snelle tip zal ik je laten zien hoe je het moet gebruiken!

Abonneer u op onze YouTube-pagina om alle videozelfstudies te bekijken!

U hebt de gegevens nodig om te sjablonen; u zult waarschijnlijk JSON ophalen van uw server; Uiteraard werken Object / Array-lettertypen net zo goed, dus dat is wat we gebruiken:

 var data = [name: "John", age: 25, name: "Jane", age: 49, name: "Jim", age: 31, name: "Julie", age: 39 , naam: "Joe", leeftijd: 19, naam: "Jack", leeftijd: 48];

De sjabloon is geschreven labels; voor elk item in uw JSON rendert de sjabloon de HTML; vervolgens wordt het hele HTML-fragment aan u geretourneerd. We kunnen vanuit de sjabloon naar de JavaScript-waarden gaan door % and% als tags te gebruiken. We kunnen ook reguliere JavaScript uitvoeren binnen deze tags. Dit is onze sjabloon:

 
 % = $ i + 1% 
Naam:  % = naam%
 % if ($ context.options.showAge) % 
Leeftijd:  % = age%
 %% 

Als u de gegevens met de sjabloon wilt weergeven, belt u de plug-in; de gegevens doorgeven aan de plugin-methode; je kunt optioneel ook een optie-object doorgeven. (Dit zijn geen vooraf gedefinieerde opties, het zijn waarden die u in de sjabloon wilt gebruiken, misschien voor vertakking.)

 $ ("# listTemplate"). render (data, showAge: true). appendTo ("ul");

Het is zo makkelijk! Veel plezier ermee! U kunt de volledige code voor deze snelle tip op Github krijgen