Skip to content

Basics

Jump to bottom
Chris Talman edited this page Aug 3, 2015 · 3 revisions

Basic Example

Below is a simple example of an Emboss template in use. We will step through the important parts, showcasing key functionality.

<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
		<script type="application/javascript" src="Emboss.js"></script>
		<script type="text/x-html-emboss" id="template1">
			{{if title && subtitle}}
				<h1>{{print title}}</h1>
				<h2>{{print subtitle}}</h2>
			{{/if}}
		</script>
		<script type="application/javascript">
			window.onload = function()
			{
				var templateData = {title: 'This Is A Title', subtitle: 'This is a subtitle!'};
				document.body.innerHTML = Emboss.render(document.getElementById('template1'), templateData);
			};
		</script>
	</head>
	<body>
	</body>
</html>

First, Emboss must be included in the webpage. Nothing more is needed. The library will set itself up.

<script type="application/javascript" src="Emboss.js"></script>

Next, we define a simple template in a script tag.

<script type="text/x-html-emboss" id="template1">
	{{if title && subtitle}}
		<h1>{{print title}}</h1>
		<h2>{{print subtitle}}</h2>
	{{/if}}
</script>

The template consists of two HTML elements. Within each of these elements is an Emboss print tag. Both of these elements are enclosed within an Emboss if tag.

If tags output their contents if their condition is considered by JavaScript to be true. Here, if both the title and subtitle variables exist, the tag’s contents - the two HTML elements - will be output.

Print tags output a value. Here, the two print tags will output the values of the title and subtitle variables.

Now, the template needs to be rendered. In other words, we want to get the outputted HTML from the template source combined with the template data.

<script type="application/javascript">
	window.onload = function()
	{
		var templateData = {title: 'This Is A Title', subtitle: 'This is a subtitle!'};
		document.body.innerHTML = Emboss.render(document.getElementById('template1'), templateData);
	};
</script>

Once the page is loaded, we define some data in an object.

We provide the template, and the data object, to Emboss.render().

Emboss will render the template, and then return the output.

The page’s body tag is set to the output of the template render. The user will see the following in their page.

This Is A Title
This is a subtitle!

Clone this wiki locally