Mustache Starter Kit

What is Mustache?

Mustache is a templating language that makes it easy to insert dynamic data into a page.

How to use this guide.

1. Remix this app
2. Open views/index.html to see the sample code and lots of comments, and learn how Mustache works.
3. Click show in the top left header, and select "Next to code" to see the templates update as you make changes
4. Open server.js to see the sample JSON data.

Iterating

Mustache is a "logic-less" templating system, but it can still iterate over data to make your life easy.

Iterating over an array

For example this is how you'd display an array of all the flavors of sparking water in the Glitch HQ fridge:

• grapefruit
• tangerine
• berry
• mango
• lime
• lemon
• cursed coconut

Iterating over an array of objects

This is how you'd display an array of objects…like what's playing next on the Glitch team playlist:

1. 1999 by Prince
   Requested by Anil
2. Don't You (Forget About Me) by Simple Minds
   Requested by Steph
3. Stutter by EMEFE
   Requested by Sarah
4. Silver Springs by Fleetwood Mac
   Requested by Katie

Using boolean values

Mustache can also display info based on boolean values. You can use this to change the content of your page.

is_holiday: false Today is a workday.

is_coffee_fresh: true The coffee is hot and fresh! Come and get it!

Creating Reusable Components

Mustache also makes it easy to break your markup into smaller, reusable files called partials. This is useful for things like the footer and navigation which will be present across all of your pages.