#6 - template engine: mustache.js

Tecniche di animazionedigitale 1

Michele BertoliFounder / Lead Software Engineer at Igloo

igloolab.commichele.bertoli@accademiasantagiulia.it

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