Stanislav Zorjan - Stasha - Full Stack Software Engineer and Game Development Hobbyist - Prague


For those who don't know, doT.js is JavaScript template engine.
It's one of the fastest and easy to use JavaScript templating engines.
You can find more about doT.js at:
https://github.com/olado/doT or
http://olado.github.com/doT/tutorial.html#intro

This document is just a simple reference on how to use doT.js JavaScript template engine in browser.



<!DOCTYPE html>
<html>
	<head>
		<title>Dot Example</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="../js/libs/doT.js"></script>
		<script src="../js/libs/jquery/jquery-1.7.2.min.js"></script>
	</head>
	<body>
		
		<div id="header"><h1>header</h1></div>
		
		<!-- holders where populated templates will be inserted -->
		<div id="simpleDataHolder"></div>
		<div id="simpleArrayHolder"></div>
		<div id="dataArrayHolder"></div>
		
		<br />
		<div id="simpleArrayLoopHolder"></div>
		
		
		
		
		
		<script id="simpleTemplate" type="text/x-dot-template">
			{{#def.header}}
			{{#def.header}}
			
			<!-- creates and assigns custom header if it is not set -->
			{{##def.customHeader : <div><h1>custom header {{=it.firstName}}</h1></div> #}}
			
			{{#def.customHeader}}
			{{#def.customHeader}}
			
			{{#def.loadfile('/snippet.txt')}}<br />
			{{#def['file.txt'] || (def['file.txt'] = def.loadfile('file.txt'))}} 
			{{#def['file.txt']}}
			
			<!-- setting index value -->
			{{##def.index = 0#}}
			{{ if ({{#def.index == 1}}) { }}
				<br />index is set to 1
			{{ }else{ }}
				<br />index is set to unknown value
			{{ } }}
			
			<!-- defining function -->
			{{##def.someFunction = function(){
					return "<br />text from someFunction";
				}
			#}}
			
			<!-- calling function -->
			{{#def.someFunction()}}
			
			<div>{{=it.firstName}}<div>
			<div>{{=it.lastName || it.zip || "Last name is not set"}}</div>
					
			<!-- ENCODING -->
			<div>{{!it.url}}</div>
			
			
		</script>
		
		<script id="simpleArrayTemplate" type="text/x-dot-template">
			
			<!-- printing only one item from array -->
			<div>{{=it[0]}}<div>
					
			<!-- loop through array -->
			<div>
				{{~it :value:index}}
					<span>{{=value}} </span>
				{{~}}
			</div>
		</script>
		
		<script id="dataArrayTemplate" type="text/x-dot-template">
			
			<!-- printing only first name from first object in array -->
			<div>{{=it[0].firstName}}<div>
					
			<!-- loop through objects in array -->
			<div>
				{{~it :value:index}}
					<span>{{=value.firstName}} </span>
				{{~}}
			</div>
			
			<!-- EVALUATION -->
			<!-- print array index 0, 1, 2, 3 -->
			{{ for(var prop in it) { }}
				<div>{{=prop}}</div>
			{{ } }}
			
			<!-- print objects name : value pair that is at index 1 position in array -->
			{{ for(var prop in it[1]) { }}
				<span>{{=prop}} : {{=it[1][prop]}} </span>
			{{ } }}
			
			<!-- loop over objects in array and prints their name : value pairs -->
			{{ for(var index in it) { }}
			<div>
				{{ for(var item in it[index]) { }}
				<span>{{=item}} : {{=it[index][item]}} </span>
				{{ } }}
			</div>
			{{ } }}
			
			
			<!-- CONDITIONAL !-->
			<!-- if -->
			<div>
				{{? it[0].firstName }}
					{{=it[0].firstName }}
				{{?}}
			</div>
			
			<!-- if / else if / else -->
			<div>
				<!-- if -->
				{{? it[0].lastName }}
					<span>First name is set</span>
					
					<!-- else if -->
					{{?? it[0].zip}}
						<span>You don't have a last name</span>
					<!-- else if -->
					{{?? it[0].firstName}}
						<span>Your firstName is: {{=it[0].firstName}}</span>
						
					<!-- else if end -->
					{{??}}
					
					<!-- else -->
					<span>You didn't set your name</span>
					
				<!-- if end -->
				{{?}}
			</div>
			
			
			
		</script>
		
		<script id="simpleArrayLoopTemplate" type="text/x-dot-template">
			{{~it.array :value:index}}
				<span>{{=value}} </span>
			{{~}}
		</script>
		
		
		
		
		<script>
			
//			doT.templateSettings = {
//				evaluate:    /\{\{([\s\S]+?)\}\}/g,
//				interpolate: /\{\{=([\s\S]+?)\}\}/g,
//				encode:      /\{\{!([\s\S]+?)\}\}/g,
//				use:         /\{\{#([\s\S]+?)\}\}/g,
//				define:      /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
//				conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
//				iterate:     /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
//				varname: 'it',
//				strip: true,
//				append: true,
//				selfcontained: false
//			  };
			
			
			// setting data for testing
			var simpleObject = {firstName : "Stasha", url: "<a href='http://www.stasha.info'>http://www.stasha.info</a>"};
			var simpleArray = ['one', 'two', 'three', 'four'];
			var dataArray = [{firstName: "First Name 0"},{firstName: "First Name 1", lastName : "Last Name"},{firstName: "First Name 2"},{firstName: "First Name 3"}];
			var objectArray = {array : ['one', 'two', 'three', 'four']};
			
			var def = {
				header : $("#header").html(),
				//customHeader: "<h1>TEST CUSTOM HEADER</h1>"
				loadfile: function(url){
					return "function that returns file content from url: " + url;
				}
			};
			
			// getting/creating empty templates from "scriptlets" like
			// <script id="simpleTemplate" type="text/x-dot-template"> or
			// from html tags like <div id="simpleTemplate">
			var simpleTemplate = $("#simpleTemplate").html();
			var simpleArrayTemplate = $("#simpleArrayTemplate").html();
			var dataArrayTemplate = $("#dataArrayTemplate").html();
			var simpleArrayLoopTemplate = $("#simpleArrayLoopTemplate").html();
			
			// filling templates with data
			var populatedSimpleTemplate = doT.template(simpleTemplate, undefined, def)(simpleObject);
			var populatedSimpleArrayTemplate = doT.template(simpleArrayTemplate)(simpleArray);
			var populatedDataArrayTemplate = doT.template(dataArrayTemplate)(dataArray);
			var populatedSimpleArrayLoopTemplate = doT.template(simpleArrayLoopTemplate)(objectArray);
			
			// rendering templates with data
			$("#simpleDataHolder").html(populatedSimpleTemplate);
			$("#simpleArrayHolder").html(populatedSimpleArrayTemplate);
			$("#dataArrayHolder").html(populatedDataArrayTemplate);
			$("#simpleArrayLoopHolder").html(populatedSimpleArrayLoopTemplate);
		</script>
		
	</body>
</html>





Comments (0)