workshop 8: templating: handlebars, dustjs
TRANSCRIPT
Front End Workshops
VIII.Single Page Applications
Àlex Adrià [email protected]
Templating: Dust, Handlebars
Templating Systems
Javascript Templating offers...
● Cleaner, more legible and more maintainable code.
● Presentation level desacoplation.
● More elegant way to create dynamic DOM elements.
<div class="entry"><h1>{{title}}</h1><div class="body">
{{body}}</div>
</div>
Handlebars.js is a javascript library for building clean logiclesstemplates based on the Mustache Templating Language.
Handlebars expressions
<h1>{{title}}</h1>
<h1>{{article.title}}</h1>
{{#each articles.[10].[#comments]}}<h1>{{subject}}</h1><div>
{{body}}</div>
{{/each}}
articles[10]['#comments']=
Handlebars expressions can be simple identifiers or dot-separated paths. To reference a property that is not a valid identifier, you can use segment-literal notation.
HelpersThey are logic expressions and logic blocks that provide thenecessary logic for templates on the HTML page. You can addcomplex functionality with your own custom helpers.
{{{link "See more..." story.url}}}
Handlebars.registerHelper('link', function(text, url) {url = Handlebars.escapeExpression(url);text = Handlebars.escapeExpression(text);
return new Handlebars.SafeString("<a href='" + url + "'>" + text + "</a>"
);});
Built-in Helpers
{allFruits: ["Tangerine", "Mango", "Banana"]}
{{#each allFruits}}<li>{{this}}</li>{{/each}}
<li> Tangerine </li><li> Mango </li><li> Banana </li>
Built-in Helpers
<div class="user-data">{{#if userLoggedIn}}Welcome, {{firstName}}{{else}}Please Log in.{{/if}}</div>
<div class="user-data">{{#unless userLoggedIn}}Please Log in.{{/unless}}</div>
Handlebars example
<script type="text/x-handlebars-template" id="template"><ul>
{{# each beers}}<li>Name: {{name}}</li><li>Style: {{style}}</li>
{{/each}}</ul></script>
var data = {};data.beers = [{"name":"Estrella","style":"Euro Lager"}, {"name":"Voll Damm","style":"Bock"},{"name":"Devil's","style":"Indian Pale Ale"}];var beerTemplate = Handlebars.compile($("#template").html());var html = beerTemplate(data);$("#content").append(html);
Handlebars example
<div id="content"><ul>
<li>Name: Estrella</li><li>Style: Euro Lager</li><li>Name: Voll Damm</li><li>Style: Bock</li><li>Name: Devil's</li><li>Style: Indian Pale Ale</li>
</ul></div>
<div class="entry"><h1>{title}</h1><div class="body">
{body}</div>
</div>
Dust is a JavaScript templating engine designed to provide a cleanseparation between presentation and logic without sacrificing easeof use.
DustJS expressions
<h1>{title}</h1>
<h1>{article.title}</h1>
<h1>{.title}</h1>
<li>{.}</li>
DustJS conditional expressions
JSON:{"isSelected": true}
TEMPLATE:<input type="checkbox"{?isSelected} selected{/isSelected}>OUTPUT:<input type="checkbox" selected>
TEMPLATE:<input type="checkbox"{^isSelected} selected{/isSelected}>OUTPUT:<input type="checkbox">
Dust can include content conditionally with ? (exists) and ^(not exists).
DustJS conditional expressions
JSON:{"isPrimary": false}
TEMPLATE:<li class="result{?isPrimary} primary{:else} secondary{/isPrimary}">
OUTPUT:<li class="result secondary">
DustJS sections
Sections are a useful alternative to the dot-notation. Asection is used to switch the references context.JSON:{"name": "John","nickname": "Jingleheimer Schmidt","friend": {"name": "Jacob"}}
TEMPLATE:<span>Hello, {name}, {#friend}{name}{/friend}.</span>
OUTPUT:<span>Hello, John, Jacob.</span>
Hello, {name}, {friend.name}=
DustJS looping
Inside a loop, you can use {.} to reference the current itemand the special references {$idx} and {$len} to show the indexof the current item and the length of the array.
JSON:{"languages": ["HTML","CSS","JavaScript","Dust"]}
TEMPLATE:<ul>
{#languages}<li>{@math key=$idx method="add" operand="1"/}. {.}</li>{/languages}</ul>
OUTPUT:<ul><li>1. HTML</li><li>2. CSS</li><li>3. JavaScript</li><li>4. Dust</li></ul>
DustJS Helpers
Logic: {@eq}, {@ne}, {@gt}, {@lt}, {@gte}, {@lte}
Separator: {@sep}, {@first}, {@last}
Select Helper: {@select}, {@eq}, {@any}, {@none}
Math Helper: {@math}
DustJS Helpers
JSON:{"level": "padawan"}
TEMPLATE:{@eq key=level value="master"}
You are no longer a Padawan.{:else}
You have much to learn, young Padawan.{/eq}
OUTPUT:You have much to learn, young Padawan.
DustJS Helpers
JSON:{"guests": ["Alice", "Bob", "Charlie"]}
TEMPLATE:{#guests}
{@first}Hello {/first}{@last}and {/last}{.}{@sep}, {/sep}{@last}!{/last}
{/guests}
OUTPUT:Hello Alice, Bob, and Charlie!
DustJS Helpers
JSON:{"progress": 70}
TEMPLATE:There is {@math key=100 method="subtract" operand=progress/}% left to do.
OUTPUT:There is 30% left to do.
DustJS Partials
Templates can include other templates by using partials. Apartial relies on the JSON context of the parent templateinvoking it. Partials also accept parameters that add extrareferences.
{>"header" mode="classic"/}
DustJS PartialsJSON:{"isGreeting": true,"parks": [{"name": "Disneyland","qualifier": "Happiest"},"name": "Disney World Magic Kingdom", "qualifier": "Most Magical"}]}
DISNEY-PARK TEMPLATE:{?isGreeting}Greetings{:else}Goodbye{/isGreeting} from {parkName}, The {qualifier} Place on Earth!
DISNEY TEMPLATE:{#parks}
{>"disney-park" parkName=name qualifier=qualifier/}{~n}{/parks}
OUTPUT:Greetings from Disneyland, The Happiest Place on Earth!Greetings from Disney World Magic Kingdom, The Most Magical Place on Earth!
DustJS Example<script type="text/x-template" id="building-item-template"><li buildingId="{id}" class="building-list-item">
<div class="building-name">{name}</div></li></script>
var buildingTemplate = dust.compile($("#building-item-template").html(),"tpl");dust.loadSource(buildingTemplate);
var templateFunction = function(building) {var result;dust.render("buildingTemplate", building, function(err, res) {
result = res;});return result;};
DustJS Example
var building = {id: 1,name: "Empire State Building"};
$("#content").append(templateFunction(building));
<div id="content"><li buildingId="1" class="building-list-item">
<div class="building-name">Empire State Building</div></li>
</div>
The world without templating
$("<div></div>").addClass("estructura").append("<h1>" + titulo +
"</h1>").append($("<div></div>")
.html(cuerpo)
.addClass("cuerpo")).appendTo("body");
More information in...
● http://handlebarsjs.com/
● http://javascriptissexy.com/handlebars-js-tutorial-learn-everything-about-handlebars-js-javascript-templating/
● http://www.dustjs.com/guides/getting-started/
● http://akdubya.github.io/dustjs/
● http://www.remwebdevelopment.com/blog/javascript/learning-about-dustjs-47.html
THANKS FOR YOUR ATTENTION!
Give your questions on the comments section
