Skip to content

Instantly share code, notes, and snippets.

@joechan3

joechan3/1. Define Mustache Template

Last active May 25, 2016 02:29
Show Gist options
  • Save joechan3/49b1651e9f76062f0e75b1e4fea1f102 to your computer and use it in GitHub Desktop.
Save joechan3/49b1651e9f76062f0e75b1e4fea1f102 to your computer and use it in GitHub Desktop.
Download ZIP
Mustache Setup
Raw
1. Define Mustache Template
Grab mustache.js from https://github.com/janl/mustache.js/
Link to: <script type="text/javascript" src="../mustache.js"></script>
(Simple Template)
<script type="text/template" id="templateID">
<div class="contentWrapper">
<div>{{field1}}</div>
<div>{{field1}}</div>
<div>{{field1}}</div>
</div>
</script>
{
"field1" : "some text data",
"field2" : 100,
"field3" : "some other string"
}
------------------------------------------------------
(Mustache Sections & Conditions- Good for data collections/array of objects)
(#sectionName doesn't have to be an array, it can just be a property)
<script type="text/template" id="templateID">
<div class="contentWrapper">
{{#sectionName}}
<div>{{field1}}</div>
<div>{{field1}}</div>
<div>{{field1}}</div>
{{/sectionName}}
</div>
</script>
(Conditions example)
<script type="text/template" id="templateID">
<div class="contentWrapper">
{{#fullTime}} //Property exists or its property value evaluates to a true value
<div>This person works full-time</div>
{{/fullTime}}
{{^fullTime}} //Property does not exist or its property value evaluates to a false value
<div>This person works part-time</div>
{{/fullTime}}
</div>
</script>
------------------------------------------------------
(Functions)
var data = {
"field1" : "some text data",
"field2" : 100,
"total" : function () {
return this.field1 + this.field2;
}
<div>{{total}}</div>
You can also return a function (see Functions example re: {{#decorate}})
Raw
2. Rendering Mustache Templates
Step 1: Get the template content
e.g. var tlContent = document.getElementById('templateID').innerHTML;
or
var tlContent = $("#templateID").html();
Step 2: Render the template
var result = Mustache.render(tlContent, dataObj); //dataObj contains the JSON data object
Step 3:Put the resulting HTML back into the document
containerElement.innerHTML = result;
or
$("#container").html(result); //#container is where you want to put the content
Raw
Conditions Template Example
<!DOCTYPE html>
<html>
<head>
<title>Mustache with Conditionals Example</title>
<link rel="stylesheet" href="../styles.css">
<script type="text/javascript" src="../jquery-1.10.2.js"></script>
<script type="text/javascript" src="../mustache.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var template = $("#itemTemplate").html();
var result = Mustache.render(template, {
"item" : "Whisper 4000 in-home heater and dog walker",
"description" : "Walk your dog and heat your house at the same time? Now you can, with the Whisper 4000 Home Heating system / Dog Treadmill!",
"price" : 895.99,
"inStock" : true,
"quantity" : 100
} );
$("#container").html(result);
});
</script>
</head>
<body>
<script type="text/template" id="itemTemplate">
<div class="itemTemplateWrapper">
<div><span>Item: </span><span>{{item}}</span></div>
<div><span>Description: </span><span>{{description}}</span></div>
<div><span>Price: </span><span>{{price}}</span></div>
{{#inStock}}
<div><span>Quantity in stock: </span><span>{{quantity}}</span></div>
{{/inStock}}
{{^inStock}}
<div><span>It appears we are out of stock on this item :-(</span></div>
{{/inStock}}
</div>
</script>
<h1>Basic Templates with Mustache JS</h1>
<h3>This example embeds the template directly in the source HTML</h3>
<!-- This is the container where the templates will be instantiated -->
<div id="container"></div>
</body>
</html>
Raw
Functions example
<!DOCTYPE html>
<html>
<head>
<title>Mustache Template Example using Functions</title>
<script type="text/javascript" src="../jquery-1.10.2.js"></script>
<script type="text/javascript" src="../mustache.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var template = $("#itemTemplate").html();
var prodData = {
"items" : [
{ name: "product 1", price: 125.00 },
{ name: "product 2", price: 89.00 },
{ name: "product 3", price: 209.00 },
{ name: "product 4", price: 415.00 }
]
};
prodData.total = function() {
return Math.round((this.price * 1.08) * 100) / 100;
};
prodData.decorate = function () {
return function(text, render) {
return "<u>" + render(text) + "</u>";
};
};
var result = Mustache.render(template, prodData );
$("#container").html(result);
});
</script>
</head>
<body>
<script type="text/template" id="itemTemplate">
<div class="itemTemplateWrapper">
{{#items}}
<div><span>Item: </span>{{#decorate}}<span>{{name}}</span>{{/decorate}}</div>
<div><span>Price: </span><span>{{total}}</span></div>
{{/items}}
</div>
</script>
<h1>Functions in Templates with Mustache JS</h1>
<h3>This example uses a function to calculate data on the fly</h3>
<!-- This is the container where the templates will be instantiated -->
<div id="container"></div>
</body>
</html>
Raw
Mustache comment
{{! This is a mustache comment and it is totally ignored }}
Raw
Sections Template Example
<!DOCTYPE html>
<html>
<head>
<title>Mustache Sections Example</title>
<link rel="stylesheet" href="../styles.css">
<script type="text/javascript" src="../jquery-1.10.2.js"></script>
<script type="text/javascript" src="../mustache.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var template = $("#itemTemplate").html();
var result = Mustache.render(template, {
"employees" : [{
"name" : "Henry Handsome",
"phone" : "+1-212-555-1234",
"email" : "pensive@example.com",
"title" : "Senior VP of Basketweaving",
"fulltime" : true
}, {
"name" : "Penelope Persistent",
"phone" : "+1-212-555-8000",
"email" : "truthful@example.com",
"title" : "Principal Understudy",
"fulltime" : false
}, {
"name" : "Sam Serendipity",
"phone" : "+1-212-555-9876",
"email" : "helpful@example.com",
"title" : "Chief Cook and Bottle Washer",
"fulltime" : true
}, {
"name" : "Tom Terriffic",
"phone" : "+1-212-555-0011",
"email" : "grumpy@example.com",
"title" : "Janitor",
"fulltime" : false
}]
});
$("#container").html(result);
});
</script>
</head>
<body>
<script type="text/template" id="itemTemplate">
{{#employees}}
<div class="itemTemplateWrapper">
{{! This is a mustache comment and it is totally ignored }}
<div>{{name}}</div>
<div>{{title}}</div>
<div>{{email}}</div>
<div>{{phone}}</div>
</div>
{{/employees}}
</script>
<h1>Repeating data sections with Mustache</h1>
<h3>This example shows how to use Mustache sections</h3>
<!-- This is the container where the templates will be instantiated -->
<div id="container"></div>
</body>
</html>
Raw
Simple Template Example
<!DOCTYPE html>
<html>
<head>
<title>Simple jQuery Template Example</title>
<script type="text/javascript" src="../jquery-1.10.2.js"></script>
<script type="text/javascript" src="../mustache.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var template = $("#itemTemplate").html();
var result = Mustache.render(template, {
"item" : "Whisper 4000 in-home heater and dog walker",
"description" : "Walk your dog and heat your house at the same time? Now you can, with the Whisper 4000 Home Heating system / Dog Treadmill!",
"price" : 895.99,
"inStock" : true,
"quantity" : 100
} );
$("#container").html(result);
});
</script>
</head>
<body>
<script type="text/template" id="itemTemplate">
<div class="itemTemplateWrapper">
<div><span>Item: </span><span>{{item}}</span></div>
<div><span>Description: </span><span>{{description}}</span></div>
<div><span>Price: </span><span>{{price}}</span></div>
</div>
</script>
<h1>Simple Templates with Mustache JS</h1>
<h3>This example embeds the template directly in the source HTML</h3>
<!-- This is the container where the templates will be instantiated -->
<div id="container"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment