Mustache template parser inspired by handlebarsjs.
Access to data is done through the key names {{name}} based on level of context.
Data
{
"title": "The best title",
"content": "Massive body of text that explains everything."
}
Template
<h1>{{title}}</h1>
<p>{{content}}</p>
Result
<h1>The best title</h1>
<p>Massive body of text that explains everything.</p>
Variables are HTML escaped by default. To access the data unescaped use triple curly brackets.
Data
{
"title": "<h1>The best title</h1>",
"content": "<p>Massive body of text that explains everything.</p>"
}
Template
{{title}}
{{{content}}}
Result
<h1>The best title</h1>
<p>Massive body of text that explains everything.</p>
Data
{
"articles": [
{
"title": "The best title",
"content": "Massive body of text that explains everything."
}, {
"title": "Another title",
"content": "Well written text."
}, {
"title": "Again?",
"content": "Sometimes twice is just not enough."
}
]
}
Template
{#each articles}
<article>
<h1>{{title}}</h1>
<p>{{content}}</p>
</article>
{/each}
Result
<article>
<h1>The best title</h1>
<p>Massive body of text that explains everything.</p>
</article>
<article>
<h1>Another title</h1>
<p>Well written text.</p>
</article>
<article>
<h1>Again?</h1>
<p>Sometimes twice is just not enough.</p>
</article>
Data
{
"articles": []
}
Template
{#each articles}
<article>
<h1>{{title}}</h1>
<p>{{content}}</p>
</article>
{else}
<p>No articles to view.</p>
{/each}
Result
<p>No articles to view.</p>
Data
{
"colors": [
"Red",
"Yellow"
"Green",
"Blue",
"Purple"
]
}
Template
<ul>
{#each articles}
<li>{{this}}</li>
{/each}
</ul>
Result
<ul>
<li>Red</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
<li>Purple</li>
</ul>
Data
{
"colors": [
"Red",
"Yellow"
"Green",
"Blue",
"Purple"
]
}
Template
{#each articles}
<p>{{@index}} {{this}}</p>
{/each}
Result
<p>1. Red</p>
<p>2. Yellow</p>
<p>3. Green</p>
<p>4. Blue</p>
<p>5. Purple</p>
Data
{
"article": {
"title": "The best title",
"content": "Massive body of text that explains everything."
}
}
Template
<dl>
{{#each article}}
<dt>{{@key}}:</dt>
<dd>{{this}}</dd>
{{/each}}
</dl>
Result
<dl>
<dt>title:</dt>
<dd>The best title</dd>
<dt>content:</dt>
<dd>Massive body of text that explains everything.</dd>
</dl>
Data
{
"article": {
"title": "The best title",
"content": "Massive body of text that explains everything."
}
}
Template
{{#with article}}
<h1>{{title}}</h1>
<p>{{content}}</p>
{{/with}}
Result
<h1>The best title</h1>
<p>Massive body of text that explains everything.</p>
Data
{
"article": {}
}
Template
{#with article}
<article>
<h1>{{title}}</h1>
<p>{{content}}</p>
</article>
{else}
<p>No articles to view.</p>
{/each}
Result
<p>No articles to view.</p>
Data
{
"title": "The best title",
"content": "Massive body of text that explains everything."
}
Template
<h1>{{title}}</h1>
{{#if content}}
<p>{{content}}</p>
{{/if}}
Result
<h1>The best title</h1>
<p>Massive body of text that explains everything.</p>
Data
{
"title": "The best title"
}
Template
<h1>{{title}}</h1>
{{#if content}}
<p>{{content}}</p>
{{else}}
<p>No content.</p>
{{/if}}
Result
<h1>The best title</h1>
<p>No content.</p>
Template
{{! This comment will not be in the output. }}
{{!-- Any comments that must contain }} or other parser tokens should use this comment style. --}}
<h1>Title</h1>
Result
<h1>Title</h1>