Introduction to JSON and Mustache

At its core, JSON is just a key-value store. This means that any datum in JSON has a key and a value. The key is the name of the datum, and the value is what is stored at that reference. Here's a simple example:

{
  "answer": 42
}

In this case, the key is answer and the value is 42. Let's look at how we might reference this datum in a pattern.

Mustache is a language for so-called "logic-less templates." Variables in Mustache are denoted by double curly braces. For example:

<h1>I am {{ answer }}</h1>

The Mustache variable is {{ answer }}. Note that answer matches the name of the key in our JSON example. When Fepper builds this pattern, the result will be:

<h1>I am 42</h1>

Note that {{ answer }} was replaced by the value for answer found in our JSON example.

Nested Variables

We may want our JSON data to adapt to the needs of a more complex site. We can create nested hierarchies like so:

"life": {
  "answer": 21
},
"universe": {
  "answer": 14
},
"everything": {
  "answer": 7
}

Note how the data are nested within separate keys. We can use the data thusly:

{{# life }}
  <span>I was {{ answer }}</span>
{{/ life }}
{{# universe }}
  <span>in {{ answer }} universes</span>
{{/ universe }}
{{# everything }}
  <span>{{ answer }} times</span>
{{/ everything }}

We can also write the variables as dot-delimited object properties:

  <span>I was {{ life.answer }}</span>
  <span>in {{ universe.answer }} universes</span>
  <span>{{ everything.answer }} times</span>

Either of these would be built as:

  <span>I was 21</span>
  <span>in 14 universes</span>
  <span>7 times</span>

Rendering HTML in Variables

You may want to include HTML in your variables. By default, Mustache will convert special characters into HTML entities. For example, for this JSON:

{
  "answer": "<span>42</span>"
}

If you wrote your template like:

<h1>I am {{ answer }}</h1>

It would be built as:

<h1>I am &lt;span&>42&lt;/span&gt;</h1>

In order to ensure that markup doesn't get converted, use triple curly braces:

<h1>I am {{{ answer }}}</h1>

Then it builds like so:

<h1>I am <span>42</span></h1>

For Further Reference