Stpl.js

All exemple in this document will use following family object defined here:

Defining a template string

Using a script tag

To define a template string just create a script tag with type="text/stpl" and a template name in the rel attribute.
For example writing this: <script type="text/stpl" rel="templateName">this is my template {{withVar}}</script> 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

Using registerString method

You also can directly register a template string using the registerString method stpl.registerString('templateName', 'this is my template {{withVar}}');

Simple variable replacement

with this template defined <script type="text/stpl" rel="familyDesc">this is the {{name}} family</script> We can perform replacement and put it inside a div just like this: document.getElementById('divFamilyDesc').innerHTML = stpl("familyDesc",family); this will lead to the following result:

pointing dotted properties

Template defined:

<script type="text/stpl" rel="motherAndDad">
	{{mother.firstname}} and {{father.firstname}} are {{name}} family's parents.
</script>

Javascript replacement: document.getElementById('divMotherAndDad').innerHTML = stpl("motherAndDad",family); give the following result:

Looping through child elements

to get a listing of the family's childs we can perform as follow:
code in the page

<ul id="childsList">
	<script type="text/stpl" rel="childs">
		{{#childs}}<li>{{firstname}} as {{age}} years old</li>{{/childs}}
	</script>
</ul>

Javascript replacement: document.getElementById('childsList').innerHTML = stpl("childs",family); give the following result:

pointing property of parents elements

modifying the previous example like this:
code in the page

<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>