A tiny Template-Engine mixing up HTML and pure JavaScript in one template
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
examples
.gitignore
Gruntfile.js
LICENSE
README.md
jquery.plugin.js
package.json

README.md

tript.js

A tiny Template-Engine (263 bytes) mixing up HTML and pure JavaScript in one template

tript.js is a tiny and simple template-engine which allows you to mixup JavaScript and HTML.
You do what you would do with handlebars, jsrender or other template-engines but this time with pure and fast JavaScript.

Demo

Go check out this demo at codepen.io.

Example

<!-- Embed tript.js -->
<script src="tript.min.js"></script>

<!-- TEMPLATE -->
<script id="template" type="text/html">
	<div id="content">
		<h1>my awesome $app blog</h1>
		<div style="font-weight: bold;">$headline</div>
		<p>$description</p>

		<div id="posts">

			for(var i in posts) {
				<div class="post">
					var title = posts[i].title,
						date = posts[i].date,
						body = posts[i].body;

					<h2>#$i, $title on $date|format</h2>
					<p>$body</p>

				</div>
			}

		</div>

		var fav_animal = "Crow";
		<p>Your should know: my favorite animal is the <b>$fav_animal</b>.</p>
	</div>
</script>
// called from template
T.format = function(date) {
	return date.getMonth() +"."+ date.getDate() +"."+ date.getFullYear();
};

// set context
var context = {
	app: 'tript.js',
	headline: 'A tiny Template-Engine mixing up HTML and pure JavaScript in one template',
	description: 'tript.js is a freakin\' tiny template-engine which allows you to mixup JavaScript and HTML.',
	posts: [
		{
			title: 'Big News',
			date: new Date('2014-11-14'),
			body: 'tript.js is great!'
		},
		{
			title: 'Bad News',
			date: new Date('2014-11-11'),
			body: "tript.js doesn't exist yet :("
		}
	]
};

// parse template
document.body.innerHTML = T(template.innerHTML, context);

Good-to-know

Any context-member or variable is accessible inside any HTML-Tag via $.
To execute pure JavaScript in an HTML-Tag, use the <% ... %>-Tags.

<h1>my awesome $app blog</h1>
<p><% show ? description : '' %></p>

You can also call your own or predefined helper-functions:

T.format = function(date) {
	return date.getMonth() +"."+ date.getDate() +"."+ date.getFullYear();
};

T.toString = function(mixed) {
	return mixed.toString();
};

var date = new Date(),
	age = 30;
<p>$date|format</p>
<p>$age|toString</p>

Anything not embedded in a line with an HTML-Tag will be executed as JavaScript.

Possible errors in the template are output in the users console.

Install with bower

$ bower install tript

jQuery plugin

Use the jQuery plugin (dist/jquery.tript.min.js) if you want to render templates directly.

$('#wrapper').renderTript(template, context);

Secrets

  • tript.js actually means template-script. Awesome!
  • tript.js is only 263 bytes of mix-and-match-madness.
  • this script was inspired by John Resig's Micro Templating
  • Zombies will kill your friends if you don't use tript.js. *

















( * Zombies will not kill your friends if you don't use tript.js. They'll eat you alive! )