stpl
Version:
tiny mustache extended style template system
169 lines (156 loc) • 5.26 kB
HTML
<html>
<head>
<meta charset="utf8"/>
<title>Stpl demo page</title>
<style>
body{
font-family:Arial,Helvetica;
background:#333;
margin:0;
}
#layout{
width:890px;
margin:auto;
background:#fff;
color:#333;
padding:.5em;
}
code{
display:block;
font-family:mono;
white-space:pre;
background:#ffe;
color:#552;
border:1px #552 groove;
padding: 0 .4em;
margin:.4em 0;
border-radius:.3em;
overflow:auto;
}
h2{
margin:2.5em 0 0 0;
}
h3{
margin:.75em 0 0 0;
}
.result{
border:solid silver 1px;
padding:.4em;
border-radius:.3em;
color:#ffe;
background:#333;
}
.note{
background:#ccc;
padding:1em 1em 1em 5em;
border-radius:.3em;
color:#333;
}
.note:before{
content:"\270e";
display:block;
height:100%;
float:left;
margin-left:-1em;
font-size:4em;
line-height:.75em;
}
</style>
<script src="lib/stpl.js"></script>
<script id="demoData">
var family = {
name: "Doe"
,father: {age:42,firstname:"John"}
,mother: {age:41,firstname:"Jannince"}
,childs:[
{age:20,firstname:'Dhaya',liveAtFamilyHouse:false}
,{age:18,firstname:'Oliver',liveAtFamilyHouse:true}
,{age:15,firstname:'Jasmine',liveAtFamilyHouse:true}
]
};
</script>
</head>
<body>
<div id="layout">
<h1>Stpl.js</h1>
<div class="note">
All exemple in this document will use following family object defined here:
<code><script>document.write(document.getElementById('demoData').innerHTML)</script></code>
</div>
<h2>Defining a template string</h2>
<h3>Using a script tag</h3>
To define a template string just create a <em>script</em> tag with <em>type="text/stpl"</em> and a template name in the rel attribute.
<br />
For example writing this:
<code><xmp><script type="text/stpl" rel="templateName">this is my template {{withVar}}</script></xmp></code>
define a template named "templateName" with "this is my template {{withVar}}" as the template String where withVar will be replaced by the content of the given withVar property of given datas
<h3>Using <em>registerString</em> method</h3>
You also can directly register a template string using the <em>registerString</em> method
<code><xmp>stpl.registerString('templateName', 'this is my template {{withVar}}');</xmp></code>
<h2>Simple variable replacement</h2>
with this template defined
<code><xmp><script type="text/stpl" rel="familyDesc">this is the {{name}} family</script></xmp></code>
We can perform replacement and put it inside a div just like this:
<code>document.getElementById('divFamilyDesc').innerHTML = stpl("familyDesc",family);</code>
this will lead to the following result:
<script type="text/stpl" rel="familyDesc">this is the "{{name}}" family</script>
<div id="divFamilyDesc" class="result"></div>
<script>document.getElementById('divFamilyDesc').innerHTML = stpl("familyDesc",family);</script>
<h3>pointing dotted properties</h3>
Template defined:
<code><xmp><script type="text/stpl" rel="motherAndDad">
{{mother.firstname}} and {{father.firstname}} are {{name}} family's parents.
</script></xmp></code>
Javascript replacement:
<code>document.getElementById('divMotherAndDad').innerHTML = stpl("motherAndDad",family);</code>
give the following result:
<script type="text/stpl" rel="motherAndDad">{{mother.firstname}} and {{father.firstname}} are {{name}} family's parents.</script>
<div id="divMotherAndDad" class="result"></div>
<script>document.getElementById('divMotherAndDad').innerHTML = stpl("motherAndDad",family);</script>
<h2>Looping through child elements</h2>
to get a listing of the family's childs we can perform as follow:
<br />
code in the page
<code><xmp><ul id="childsList">
<script type="text/stpl" rel="childs">
{{#childs}}<li>{{firstname}} as {{age}} years old</li>{{/childs}}
</script>
</ul>
</xmp></code>
Javascript replacement:
<code>document.getElementById('childsList').innerHTML = stpl("childs",family);</code>
give the following result:
<div class="result">
<ul id="childsList">
<script type="text/stpl" rel="childs">
{{#childs}}<li>{{firstname}} as {{age}} years old</li>{{/childs}}
</script>
</ul>
</div>
<script>document.getElementById('childsList').innerHTML = stpl("childs",family);</script>
<h3>pointing property of parents elements</h3>
modifying the previous example like this:
<br />
code in the page
<code><xmp><ul id="childsListWithParents">
<script type="text/stpl" rel="childsWithParents">
{{#childs}}<li>{{firstname}} as {{age}} years old and is child of {{/mother.firstname}} and {{../father.firstname}} </li>{{/childs}}
</script>
</ul>
</xmp></code>
Javascript replacement:
<code>document.getElementById('childsList').innerHTML = stpl("childs",family);</code>
give the following result:
<div class="result">
<ul id="childsListWithParents">
<script type="text/stpl" rel="childsWithParents">
{{#childs}}<li>{{firstname}} as {{age}} years old and is child of {{/mother.firstname}} and {{../father.firstname}} </li>{{/childs}}
</script>
</ul>
</div>
<script>document.getElementById('childsListWithParents').innerHTML = stpl("childsWithParents",family);</script>
<h2>Conditional</h2>
</div>
</body>
</html>