LTemplate is light weight template engine for JavaScript. There is no template private control grammar, but it is possible to imbed JavaScript to HTML of poult shape simply. In addition, at the time of variable output it is possible to utilize the filter of escape processing and the like.
Please download from link below.
Simply Hello World code.
<script type="text/javascript" src="./LTemplate.js"></script>
<script type="text/javascript">
var tpl = new LTemplate("[%= context.message %]");
var result = tpl.applyTemplate({message:"Hello World!"});
alert(result); // Hello World!
</script>
Demonstration of LTemplate that use Hatena Bookmark API.
| Syntax | Description |
|---|---|
| object LTemplate ( string template ) | The template is transferred with argument of the constructor as a character string. |
| string applyTemplate ( object context ) | The variable which with argument of apply method we would like to utilize inside the templet is transferred. Inside the templet argument can be utilized with the variable identifier, context. Return value becomes the result character string which interprets the templet. |
There is only either one whether, it interprets in LTemplate as the code of JavaScript, or it outputs of, as the variable of JavaScript or.
| Syntax | Description | Sample |
|---|---|---|
| [% %] | It develops as the JavaScript code. | |
| [%= %] | It is appraised is output as JavaScript variable and. | |
| [%= |name %] | When outputting filter processing is done. It connects option with the : . Please refer to Modifier concerning the filter. | |
At the time of variable output by the fact that it passes through the Modifier, it can bet the filter on variable. In addition, it is possible also to process the plural filters with continuation by connecting with the pipe(|). Below is example of the Modifier.
[%= context.message|replace:"abc":"ABC"|truncate:60:"***"|escape %]
[%= new Date()|date_format:"Y/m/d H:i:s" %]When transfers the character string to the option of Modifier, it is necessary to surround by all means with double quotes. You can't use single quotes.
| Name | Option 1 | Option 2 | Description |
|---|---|---|---|
| escape | - | - | Escape string as & < > " ' . |
| encuri | - | - | When encodeURIComponent call is done, it is equal. |
| trim | - | - | Strip whitespace from the beginning and end of a string. |
| nl2br | - | - | All "\n" line breaks will be converted to html <br /> tags in the given variable. |
| strip_tags | - | - | This strips out markup tags. /<(.|\n)+?>/g |
| upper | - | - | This is used to uppercase a variable. |
| lower | - | - | This is used to lowercase a variable. |
| default | string default | - | This is used to set a default value for a variable. |
| cat | string string = "" | - | This value is concatenated to the given variable. |
| truncate | [number length = 80] | [string character = "..."] | This truncates a variable to a character length, the default is 80. As an optional second parameter, you can specify a string of text to display at the end if the variable was truncated. |
| date_format | string format | - | Format the date object. It is necessary to load the DateFormatter. |
| replace | string search | [string replace = ""] | A simple search and replace on a variable. |
* [] is necessity input. = is default value.
[% , [%= , %] is not sentence structure respectively and we would like to handle when, as the character string please insert \ before the %. Concretely, [\% , [\%= , \%] .
Inside the template, it cannot use __out and __cnt for the variable of JavaScript. In addition, the argument object of applyTemplate becomes the variable identifier, context.
It is the sample code which develops the template which was imbedded to textarea.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./LTemplate.js"></script>
</head>
<body>
<div id="out"></div>
<textarea id="template" style="display:none">
<h1>[%= context.title|escape %]</h1>
<p>[%= context.description|truncate:20|escape %]</p>
</textarea>
<script type="text/javascript">
var template = document.getElementById("template").value;
var context = {
title: "LTemplate",
description: "LTemplate is light weight template engine for JavaScript."
}
var tpl = new LTemplate(template);
var result = tpl.applyTemplate(context);
document.getElementById("out").innerHTML = result;
</script>
</body>
</html>Operation verification is done with IE6SP2(Win), IE7(Win), Firefox2.0/3.0(Win), Firefox2.0/3.0(Mac), Opera9.23/9.50(Win), Safari3.0.4(Win), Safari2.0.4/3.1(Mac).
LGPL License. (GNU Lesser General Public License)