- Overview - Mustache.js

1. Tecniche di animazione
digitale 1

2. Tecniche di animazione
digitale 1
Michele Bertoli
Founder / Lead Software Engineer at Igloo
igloolab.com
michele.bertoli@accademiasantagiulia.it

3. Client-side 1
January 09, 2013

4. Agenda
Overview 5
Mustache.js 9

5. Overview

6. 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

7. Server side (PHP)
<?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; ?>
7 Client-side / Overview

8. Server side (.NET)
@foreach (var post in Model) {
<article>
<header>
<h1>
<a href="@post.Permalink ">
@post.Title
</a>
</h1>
</header>
@post.Content
</article>
}
8 Client-side / Overview

9. Mustache.js

10. 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.
http://mustache.github.com/#demo
10 Client-side / Mustache.js

11. Usage
var view = {
name: "World"
};
var template = "Hello {{name}}";
var output = Mustache.render(template, view);
http://jsfiddle.net/MicheleBertoli/nwNhd/
11 Client-side / Mustache.js

12. Coffee Break

13. Templates
A mustache template is a string that contains any number of
mustache tags.
Tags are indicated by the double mustaches that surround
them.
{{name}}
13 Client-side / Mustache.js

14. Sections
Sections render blocks of text one or more times, depending
on the value of the key in the current context.
http://jsfiddle.net/MicheleBertoli/nwNhd/1
14 Client-side / Mustache.js

15. 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.
http://jsfiddle.net/MicheleBertoli/nwNhd/2
15 Client-side / Mustache.js

16. 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.
http://jsfiddle.net/MicheleBertoli/nwNhd/3
16 Client-side / Mustache.js

17. Comments
Comments begin with a bang and are ignored.
<h1>Today{{! ignore me }} .</h1>
17 Client-side / Mustache.js

18. Partials
http://jsfiddle.net/MicheleBertoli/nwNhd/4
18 Client-side / Mustache.js

19. Compiled templates
Mustache templates can be compiled into JavaScript functions
using Mustache.compile for improved rendering performance.
http://jsfiddle.net/MicheleBertoli/nwNhd/5
19 Client-side / Mustache.js

20. Alternatives
● Handlebars http://handlebarsjs.com/
● Jade https://github.com/visionmedia/jade
● Underscore http://documentcloud.github.com/underscore/#template
20 Client-side / Mustache.js

21. Thank you