#6 - Template Engine: Mustache.js

1,863 views

Published on

- Overview
- Mustache.js

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,863
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

#6 - Template Engine: Mustache.js

  1. 1. Tecniche di animazionedigitale 1
  2. 2. Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accademiasantagiulia.it
  3. 3. Client-side 1 January 09, 2013
  4. 4. AgendaOverview 5Mustache.js 9
  5. 5. Overview
  6. 6. DefinitionA template engine is software that is designed to process webtemplates and content information to produce output webdocuments. 6 Client-side / Overview
  7. 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. 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. 9. Mustache.js
  10. 10. DefinitionMustache.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 valuesprovided in a hash or object. http://mustache.github.com/#demo 10 Client-side / Mustache.js
  11. 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. 12. Coffee Break
  13. 13. TemplatesA mustache template is a string that contains any number ofmustache tags.Tags are indicated by the double mustaches that surroundthem. {{name}} 13 Client-side / Mustache.js
  14. 14. SectionsSections render blocks of text one or more times, dependingon the value of the key in the current context. http://jsfiddle.net/MicheleBertoli/nwNhd/1 14 Client-side / Mustache.js
  15. 15. FunctionsIf the value of a section key is a function, it is called with thesections literal block of text, un-rendered, as its firstargument. http://jsfiddle.net/MicheleBertoli/nwNhd/2 15 Client-side / Mustache.js
  16. 16. Inverted sectionsThe block of an inverted section is rendered only if the value ofthat sections tag is null, undefined, false, or an empty list. http://jsfiddle.net/MicheleBertoli/nwNhd/3 16 Client-side / Mustache.js
  17. 17. CommentsComments begin with a bang and are ignored. <h1>Today{{! ignore me }} .</h1> 17 Client-side / Mustache.js
  18. 18. Partials http://jsfiddle.net/MicheleBertoli/nwNhd/4 18 Client-side / Mustache.js
  19. 19. Compiled templatesMustache templates can be compiled into JavaScript functionsusing Mustache.compile for improved rendering performance. http://jsfiddle.net/MicheleBertoli/nwNhd/5 19 Client-side / Mustache.js
  20. 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. 21. Thank you

×