Your SlideShare is downloading. ×
0
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
#6 - Template Engine: Mustache.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

#6 - Template Engine: Mustache.js

1,217

Published on

- Overview …

- Overview
- Mustache.js

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

No Downloads
Views
Total Views
1,217
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Tecniche di animazionedigitale 1
  • 2. Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accademiasantagiulia.it
  • 3. Client-side 1 January 09, 2013
  • 4. AgendaOverview 5Mustache.js 9
  • 5. Overview
  • 6. DefinitionA template engine is software that is designed to process webtemplates and content information to produce output webdocuments. 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. 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. 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. 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. 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. 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. 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. CommentsComments 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 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. 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

×