Een kijkje in: Handlebars.js

In dit bericht gaan we kijken naar Handlebars, een JavaScript-template engine op basis van Moustache. Het deelt dezelfde functionaliteiten met Moustache, maar sport een aantal nieuwe functies. Handlebar is een handjevol sjabloongereedschap, speciaal voor het weergeven van een gegevensserie in de vorm van JSON, wat vandaag de dag een veelvoorkomend formulier voor het formatteren van gegevens is dat wordt gebruikt in een webapplicatie-API. Bekijk deze inleidende post, die JSON echt goed verklaart.

In dit artikel zullen we u enkele basisfunctionaliteiten van Handlebars laten zien, en aan het einde van dit artikel zullen we ook aan een echt voorbeeld werken. Als dit iets is dat u wilt leren kennen, laten we dan beginnen.

Ermee beginnen

Laten we om te beginnen naar de Stuurbalans gaan en het broncodebestand downloaden, handlebars.js . Plaats het bestand in een geschikte map van uw project. Koppel het bestand vanuit de HTML-documenten. U kunt de link toevoegen binnen de head-tag of vóór de .

Als alternatief kunt u ook een koppeling maken naar de stuurbron vanaf een CDN.

Als het klaar is, kunnen we beginnen met het maken van een sjabloon.

Basis sjabloon

Laten we onze gegevens toevoegen: naam, leeftijd en waar de persoon vandaan komt.

 var dataSource = {"name": "Joe Bloggs", "age": "19", "from": "United Kingdom"} 

Deze gegevens dienen als een voorbeeld. Zoals eerder vermeld, kunt u soortgelijke vormen van gegevens ophalen van de meeste webtoepassingen die open API bieden, zoals Twitter, Instagram, Flickr en Dribbble. U krijgt echter wel grotere gegevenslijnen dan wat we hierboven hebben getoond. Als alternatief kunt u JSON Generator proberen om wat willekeurige gegevens te genereren.

De sjabloon

Zodra we de gegevens bij ons hebben, kunnen we de sjabloon maken om deze gegevens te plaatsen. Laten we de volgende code eens bekijken.

Stuursjabloon wordt ingesteld in een scripttag met een speciaal type: text/x-handlebars-template, en bij voorkeur ook met een ID, omdat het technisch eenvoudiger is om een element met ID in JavaScript te selecteren en sneller dan een klas te gebruiken .

Terwijl elk van de gegevens wordt gedeclareerd binnen dubbele accolades, {{...}} ; dit staat ook bekend als stuurexpressie .

Voordat we het resultaat in de browser kunnen zien, moeten we deze codes compileren en de gegevens samenvoegen in de sjabloon.

Het compileren

Laten we de sjabloon opslaan in een JavaScript-variabele, zoals zo.

 var template = $ ('# template'). html (); 

Vervolgens plaatsen we de template in Handlebars.compile() om de sjabloon te compileren.

 var compile = Handlebars.compile (sjabloon); 

Het belangrijkste van de bovenstaande code is de naam van de variabele, compile . We zullen het samen met onze gegevens gebruiken om het eindresultaat te genereren, zoals:

 var result = compile (dataSource); 

Ten slotte plaatsen we het in #content met de methode jQuery .html() deze manier.

 . $ ( '# Content') html (resultaat); 

Dit geeft ons het volgende resultaat in de browsers.

HTML Ontsnappen

Soms kunnen onze gegevens HTML-tags bevatten, bijvoorbeeld:

 var dataSource = {"name": " Joe Bloggs ", "age": "19", "from": "United Kingdom"} 

Handelingen ontsnappen standaard aan deze tags. Ze zullen de tag in hun entiteit veranderen, < zal veranderen in < while > in > . Dus we zullen een onverwacht resultaat krijgen, zoals hieronder getoond, in de browsers.

Om te voorkomen dat Handlebels de HTML-tags naar hun entiteitskarakter converteren, en ze gewoon te behandelen zoals ze zijn, gebruiken we drievoudige accolades {{{...}}} om de gegevens te declareren, zoals:

 Hallo, mijn naam is {{{name}}}. ... 

Daar ga je! De heading-tag wordt nu correct weergegeven; de naam wordt cursief weergegeven.

Voorwaardelijke helper

Stuur ondersteunt voorwaardelijke helper (of ook bekend als conditionele functie). Deze functie is een exclusieve toevoeging aan Handlebar, niet beschikbaar in Moustache. Voorwaardelijke helper is handig om gegevensweergave te voorkomen als de gegevenswaarde leeg is. Laten we als voorbeeld de waarde van onze age .

 var dataSource = {"name": "Joe Bloggs", "age": "", "from": "United Kingdom"} 

We gebruiken de voorwaardelijke helper op deze manier. Omdat de leeftijdswaarde niet aanwezig is, geven we niet de regel weer die zegt I'm {{age}},

 {{#if age}} Ik ben {{age}}, {{/ if}} 

In de browsers wordt de bovenstaande regel weergegeven.

Bovendien geeft Handlebars de gegevens ook als leeg als de waarde expliciet is opgegeven met: undefined of false .

Lus

Stuur ondersteunt ook Loop. Net als in de andere programmeertaal, wordt het gebruikt om een ​​reeks objecten te herhalen. Op dit punt hebben we slechts één object met drie gegevenslijnen. Laten we ons voorbeeld uitbreiden met nog twee andere objecten, zoals zo.

 var data = [{"name": "Joe Bloggs", "age": "19", "from": "United Kingdom"}, {"name": "Jane Doe", "age": "21", "from": "United State"}, {"name": "John Doe", "age": "20", "from": "United Nation"}]; 

Omdat we nu meer dan één object hebben. Onze huidige sjabloon zal niet langer werken om deze gegevens in de sjabloon weer te geven. In dit geval moeten we Handlebars Loop gebruiken, onze sjabloon omwikkelen met {{#each}} ... {{/each}} . We kunnen de sjabloon ook wijzigen als dat nodig is.

In dit voorbeeld zullen we deze gegevens in een lijst weergeven.

Dit is het resultaat dat we in de browsers zullen zien.

Voorbeeld

Laten we dit nu in een echt voorbeeld implementeren. Deze keer willen we een profiel van Forrst weergeven, een hub voor ontwerpers en ontwikkelaars. Forrst biedt een eenvoudige methode om hun gegevens op te halen. In ons geval kunnen we https://forrst.com/api/v2/users/info?username={username} gebruiken om een ​​gebruikersprofiel op te halen. We zullen hieronder iets soortgelijks van deze gegevens krijgen.

Opmerking: de feitelijke gegevens zijn erg lang. Dus ik moet een aantal van hen eruit strippen om het korter te maken.

 var forrstProfile = {"id": 24606, "gebruikersnaam": "jimmyliu", "name": "Jimmy Liu", "url": "http: \ / \ / forrst.com \ / people \ / jimmyliu", " likes ":" 11 ", " followers ":" 10 ", " following ":" 2 ", " photos ": {" medium_url ":" https: \ / \ / secure.gravatar.com \ / avatar \ / 3151a9294608c3143551aa265f00bf71 .jpg? s = 75 & d = https: \ / \ / forrst.com \ / assets \ / images \ /default_75.jpg ", " small_url ":" https: \ / \ / secure.gravatar.com \ / avatar \ / 3151a9294608c3143551aa265f00bf71.jpg? S = 45 & d = https: \ / \ / forrst.com \ / assets \ / images \ /default_45.jpg ", " thumb_url ":" https: \ / \ / secure.gravatar.com \ / avatar \ /3151a9294608c3143551aa265f00bf71.jpg?s=25&d=https:\/\/forrst.com\/assets\/images\/default_25.jpg "}, " bio ":" 
Een grafisch ontwerper en webdesigner gevestigd in Cupertino, Californië. Volg mij op Twitter <\ / a> @jimmyliu <\ / a> <\ / p> \ n ", " is_a ":" developer & designer ", }; 

We zullen deze gegevens in deze sjabloon plaatsen.

Laten we ze samen compileren, zoals zo.

 var template = $ ('# forrst-profile-template'). html (); var compile = Handlebars.compile (sjabloon); var result = compile (forrstProfile); $ ( '# Forrst') html (resultaat).; 

Met een paar regels CSS kunnen we een mooier resultaat behalen.

U kunt de bron downloaden en de demo van deze koppelingen bekijken.

• Demo bekijken
• Download de bron

Laatste gedachte

Ik heb eerder jQuery gebruikt voor sjabloneren. Het denkt dat ik het verkeerd deed, omdat mijn codes er uitzien als een puinhoop. Wanneer we een grote hoeveelheid data hebben, is het veel beter en netter om Handlebars te gebruiken voor het sjabloneren en weergeven ervan. Dus ik hoop dat dit een goede referentie voor u kan zijn om aan de slag te gaan met Handlebars.

Freelancers: 7 manieren om chargebacks van klanten te voorkomen

We kennen allemaal de financiële ontberingen waarmee freelancers worden geconfronteerd bij het vinden van nieuwe klanten, het behouden van bestaande inkomstenbronnen, het handhaven van cashflow tijdens langzame tijden, het berekenen van inkomstenbelastingen en meer. Helaas is er nog een financiële hobbel die je als freelancer zou kunnen tegenkomen: chargebacks.E

(Technische en ontwerptips)

CSS post-verwerkers voor beginners: tips en bronnen

CSS pre-processing is een concept dat de meeste webontwikkelaars al hebben geleerd of gelezen. We hebben het voorbewerken van CSS tot in detail behandeld om ontwikkelaars op de hoogte te houden van deze gangbare technologie. Maar hoe zit het met post-processors ?Deze relatief nieuwe tools zijn vergelijkbaar in die zin dat ze van invloed zijn op de webontwikkelingsworkflow, maar ze werken aan de andere kant van CSS-ontwikkeling ("post" -ontwikkeling)

(Technische en ontwerptips)