node-tpl
v0.0.6
Published
Generates templates in a Smarty like fashion
Downloads
43
Maintainers
thecolorredReadme
node-tpl is an easy to use, fast, templating tool to template anything you want, from webpages to emails.
Basic usage
Add placeholder items
var tpl = require('tpl');
tpl.assign("musketeers", {
"Athos": {color: "red", age: "20"},
"Aramis": {color: "green", age: "30"},
"Porthos": {color: "blue", age: "12"},
"D'Artagnan": {color: "black", age: "25"}
});
tpl.display("templates/myfile.tpl");Create the html template
<!doctype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/css/main.css">
<title>Template Demo</title>
</head>
<body>
<p>
{if new Date().getHours() >= 12}
Good afternoon!
{else}
Good morning!
{/if}
</p>
<ul>
{for $row in $musketeers}
<li>
{$row}
<ul>
<li>Age: {$row.age}</li>
<li>Favorite Color: {$row.color}</li>
</ul>
</li>
{/for}
</ul>
</body>
</html>API Documentation
Set the current directory
Files are loaded based on the current working directory (cwd). By default the cwd is set to __dirname. This can be changed by setting it with setcwd without a trailing /.
tpl.setcwd("/path/to/default");Files that are included within the markup are also loaded based on the cwd.
Variables
Variables are items that link to a variable within the template markup, they are added by using the assign method.
Note: Assigning a variable 2 or more times will overwrite the previous variable.
tpl.assign("variable", "My variable value");
tpl.assign("variable", ["Red", "White", "Blue"]);Variables can hold an array of items, including (but not limited to):
- strings
- integers
- objects
- arrays
Fetch
Fetch allows you to fetch a template and replace its values; it then gets returned back to the script. With the value you can do anything you please, such as send it in an email.
tpl.assign("name", {first: "Billy", last: "Bob"});
var body = tpl.fetch("templates/email.tpl");
console.log(body);Display
Display allows you to fetch a template and it automatically gets displayed through process.stdout.write.
tpl.assign("name", {first: "Billy", last: "Bob"});
tpl.display("templates/page1.tpl");Markup Documentation
Variables
Variables are prefixed with a $ and are between { and }. To access an array/object item use . to get the value from array/object.
{$variable}
{$variable.array_item}
{for $var in $variable}
{if $var == $another_var}
{elseif $var == $another_var}If statements
If statements are blocks that perform tests on a list of statements. Once one validates as true its contents will be displayed.
<p>
{if 1 == 2}
This should never be displayed.
{elseif '$color' == 'blue'}
This will show if color equals "blue".
{elseif new Date().getHours() >= 12}
Good afternoon!
{else}
If nothing worked then you are seeing this.
{/if}
</p>If it is after hour 11, and $color does not equal blue, and well 1 never equals 2, we would then get this output:
<p>
Good afternoon!
</p>For statements
For statements loop through a list of array items or an object and display them on a page.
<div class="column">
{for $row in $store_items}
<div class="row">
<h2><a href="/item/{$row.id}">{$row.title}</a></h2>
<p>{$row.description}</p>
<p><small>{$row.updated}</small></p>
</div>
{/for}
</div>We might then get something like this as output:
<div class="column">
<div class="row">
<h2><a href="/item/1">White Socks</a></h2>
<p>Cotton white socks</p>
<p><small>2015/01/01</small></p>
</div>
<div class="row">
<h2><a href="/item/2">Blue Socks</a></h2>
<p>Cotton blue socks</p>
<p><small>2015/01/25</small></p>
</div>
<div class="row">
<h2><a href="/item/3">Black Socks</a></h2>
<p>Silk black socks</p>
<p><small>2015/02/12</small></p>
</div>
</div>Includes
Files can be included using the include command and included files can also include other files.
{include "templates/nav.tpl"}
{include "templates/$filename"}Note: Any file that includes itself or a parent file will probably create an endless loop.
Note: Currently a variable followed by a an extention such as $filename.tpl will break the code.
Literals
A literal is a way to force the engine not to replace markup, because sometimes you don't always want to replace blocks, such as JavaScript in a browser, because they can sometimes mean the same.
For example, take this template markup:
<script>
$(".rows").each(function(){$(this).remove()});
</script>When the template markup is replaced, you will get this new javascript:
<script>
$(".rows").each(function());
</script>Not only is it invalid JavaScript, but it isn't what you wanted.
We can fix that by placing {literal}'s around that block of code and it won't change like this:
{literal}
<script>
$(".rows").each(function(){$(this).remove()});
</script>
{/literal}Now what gets output is exactly what we wanted because we told the engine not to replace it.
<script>
$(".rows").each(function(){$(this).remove()});
</script>Changelog
- 0.0.1 - 4/10/15
- Initialization
- 0.0.2 - 4/10/15
- Documentation update
- 0.0.3 - 4/11/15
- Added support for if/elseif/else
- 0.0.4 - 4/11/15
- Documentation update
- Enhancements
- Added extra npm tags
- 0.0.5 - 4/11/15
- Added support for literal's
- Added npm repository
- 0.0.6 - 4/11/15
- Added file include support
- Documentation update