Skip to content

Emboss.js (Classic) is a Lightweight JavaScript (JS) Template Engine Incorporating JS Expressions.

License

Notifications You must be signed in to change notification settings

ChrisTalman/Emboss-Classic

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Emboss.js (Classic)

This is the original version of Emboss preserved for posterity. It is a pure template engine. Please see the most recent version of Emboss, which includes a data binding engine alongside other improvements.

Emboss.js is a JavaScript template engine. It enables for templates to be generated, with or without data, on the fly.

Emboss templates can contain Emboss language, embedded within standard HTML. The language enables HTML structures to be developed involving flow control and dynamic data.

As web development becomes more complex, especially in web apps, template engines significantly smooth the development process.

Documentation

Documentation can be found in the wiki.

Example

Below is an example of an Emboss template, showcasing key functionality.

<script type="text/x-html-emboss" id="template1">
	<h1>{{print title}}</h1>
	<h2>{{print subtitle}}</h2>
	{{if typeof people !== 'undefined'}}
		<ul>
		{{for person in people count personCount}}
			{{import 'templatePerson' context person}}
		{{/for}}
		</ul>
	{{/if}}
	{{else}}
		<h1>People could not be found!</h1>
	{{/else}}
	{{if people[0].name == 'Bob'}}
		<h2>Bob is the first person!</h2>
	{{/if}}
	{{elseif people[0].name == 'Bill'}}
		<h2>Bill is the first person!</h2>
	{{/elseif}}
	{{else}}
		<h2>Bob and Bill are not the first person.</h2>
	{{/else}}
	{{execute console.log('Hello World!')}}
</script>

Below is a small template which is imported by the previous template.

<script type="text/x-html-emboss" id="templatePerson">
	<li>{{print name}}, born {{print dateOfBirth}}, age {{print ((new Date(Date.now())).getFullYear() - dateOfBirth)}}</li>
</script>

The template can be provided with the following data.

{title: 'People', subtitle: 'This is a list of people!', people: [{name: 'Bob', dateOfBirth: 1969}, {name: 'Bill', dateOfBirth: 1983}, {name: 'John', dateOfBirth: 1990}]}

Combined with this data, the template outputs the following.

People

This is a list of people!

Bob, born 1969, age 46
Bill, born 1983, age 32
John, born 1990, age 25

Bob is the first person!

About

Emboss.js (Classic) is a Lightweight JavaScript (JS) Template Engine Incorporating JS Expressions.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published