Last active
May 25, 2016 02:29
-
-
Save joechan3/49b1651e9f76062f0e75b1e4fea1f102 to your computer and use it in GitHub Desktop.
Mustache Setup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{{! This is a mustache comment and it is totally ignored }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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