#6 - template engine: mustache.js
DESCRIPTION
- Overview - Mustache.jsTRANSCRIPT
Tecniche di animazionedigitale 1
Michele BertoliFounder / Lead Software Engineer at Igloo
Tecniche di animazionedigitale 1
Client-side 1January 09, 2013
Agenda
Overview
Mustache.js
5
9
Overview
Definition
A template engine is software that is designed to process web
templates and content information to produce output web
documents.
6 Client-side / Overview
Server side (PHP)
7 Client-side / Overview
<?php while ( have_posts() ) : the_post(); ?>
<article>
<header>
<h1>
<a href="<?php the_permalink(); ?> ">
<?php the_title(); ?>
</a>
</h1>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
Server side (.NET)
8 Client-side / Overview
@foreach (var post in Model) {
<article>
<header>
<h1>
<a href="@post.Permalink">
@post.Title
</a>
</h1>
</header>
@post.Content
</article>
}
Mustache.js
Definition
Mustache.js is a logic-less template syntax.
It can be used for HTML, config files, source code - anything.
It works by expanding tags in a template using values
provided in a hash or object.
10 Client-side / Mustache.js
http://mustache.github.com/#demo
Usage
var view = {
name: "World"
};
var template = "Hello {{name}}";
var output = Mustache.render(template, view);
11 Client-side / Mustache.js
http://jsfiddle.net/MicheleBertoli/nwNhd/
Coffee Break
Templates
A mustache template is a string that contains any number of
mustache tags.
Tags are indicated by the double mustaches that surround
them.
13 Client-side / Mustache.js
{{name}}
Sections
Sections render blocks of text one or more times, depending
on the value of the key in the current context.
14 Client-side / Mustache.js
http://jsfiddle.net/MicheleBertoli/nwNhd/1
Functions
If the value of a section key is a function, it is called with the
section's literal block of text, un-rendered, as its first
argument.
15 Client-side / Mustache.js
http://jsfiddle.net/MicheleBertoli/nwNhd/2
Inverted sections
The block of an inverted section is rendered only if the value of
that section's tag is null, undefined, false, or an empty list.
16 Client-side / Mustache.js
http://jsfiddle.net/MicheleBertoli/nwNhd/3
Comments
Comments begin with a bang and are ignored.
17 Client-side / Mustache.js
<h1>Today{{! ignore me }}.</h1>
Partials
18 Client-side / Mustache.js
http://jsfiddle.net/MicheleBertoli/nwNhd/4
Compiled templates
Mustache templates can be compiled into JavaScript functions
using Mustache.compile for improved rendering performance.
19 Client-side / Mustache.js
http://jsfiddle.net/MicheleBertoli/nwNhd/5
Alternatives
● Handlebars● Jade● Underscore
20 Client-side / Mustache.js
http://handlebarsjs.com/
https://github.com/visionmedia/jade
http://documentcloud.github.com/underscore/#template
Thank you