<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Templ test</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="../templ.js"></script>
<script type="text/javascript" src="../templ.modifiers.js"></script>
<script type="text/javascript">
doubleEncode = true;
</script>
</head>
<body>
<h2>
Using modifiers
<a href="index.html" class="back">Back to tests</a>
</h2>
<script type="html/template" id="tpl_example"><table class="table">
<tr>
<td>Original:</td>
<td>{{ title }}</td>
</tr>
<tr>
<td>Upper case:</td>
<td>{{ title|upper }}</td>
</tr>
<tr>
<td>Lower case:</td>
<td>{{ title|lower }}</td>
</tr>
<tr>
<td>Capitalize:</td>
<td>{{ 'oxygen precipitation in silicon'|capitalize }}</td>
</tr>
<tr>
<td>Capitalize each word:</td>
<td>{{ title|ucwords }}</td>
</tr>
<tr>
<td>Default value:</td>
<td>{{ ''|empty('Untitled article') }}</td>
</tr>
<tr>
<td>Trim whitespaces:</td>
<td>{{ ' String to be trimmed '|trim }}, {{ 'One more//&?'|trim('/&?') }}</td>
</tr>
<tr>
<td>Escape HTML:</td>
<td>{{ '<b>Oxygen <i>precipitation</i> in silicon</b>'|esc }}</td>
</tr>
<tr>
<td>Strip HTML tags:</td>
<td>{{ '<b>Oxygen <i>precipitation</i> in silicon</b>'|stripTags }}</td>
</tr>
<tr>
<td>Truncate long string:</td>
<td>{{ title|truncate(30) }}</td>
</tr>
<tr>
<td>Repeat string:</td>
<td>{{ '-'|repeat(3) }} {{ 'Indent' }}</td>
</tr>
<tr>
<td>Repeat + concatenate:</td>
<td>{{ '-'|repeat(3)|cat(' ', 'Rank: ', rank) }}</td>
</tr>
<tr>
<td>Convert newlines to HTML breaks:</td>
<td>{{ "Convert\nnewlines\n\nto\nBR"|nl2br|esc }}</td>
</tr>
<tr>
<td>Replace part of string:</td>
<td>{{ title|replace('precipitation', 'participation')|replace('\\s', '~') }}</td>
</tr>
<tr>
<td>Replace by regexp:</td>
<td>{{ 'test 123 string'|replace("(\\d+)", '($1)') }}</td>
</tr>
<tr>
<td>URL encoding:</td>
<td>{{ 'http://abc.com/a=Hello world'|urlEncode }}</td>
</tr>
<tr>
<td>URL component encoding:</td>
<td>http://acb.com/host={{ 'http://test.com/b=1'|urlEncode(true) }}</td>
</tr>
</table></script>
<h3>Javascript code</h3>
<p>View commented list of modifiers in <a href="../templ.modifiers.js">templ.modifiers.js</a></p>
<pre>
Templ.addModifiers({
upper: function(str) {
return str.toUpperCase();
},
lower: function(str) {
return str.toLowerCase();
},
capitalize: function(str) {
return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase();
},
ucwords: function(str) {
return str.replace(/^(.)|\s(.)/g, function($1) {
return $1.toUpperCase();
});
},
empty: function(val, def) {
return val ? val : def;
},
trim: function(str) {
return str.replace(/(^\s*)|(\s*$)/g, '');
},
esc: function(str) {
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
},
stripTags: function(str) {
return str.replace(/<\w+(\s+("[^"]*"|'[^']*'|[^>])+)?>|<\/\w+>/gi, '');
},
truncate: function(str, length, repl) {
length = length || 50;
repl = repl || '...';
return str.length > length ? str.slice(0, length - repl.length) + repl : String(str);
},
repeat: function(str, count) {
return new Array((count || 1) + 1).join(str);
},
cat: function() {
return Array.prototype.slice.call(arguments).join('');
},
nl2br: function(str) {
return str.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br/>');
},
replace: function(str, search, replace) {
return str.replace(new RegExp(search, 'gi'), replace);
},
urlEncode: function(str, full) {
return full ? encodeURI(str) : encodeURIComponent(str);
}
});
</pre>
<h3>Template</h3>
<pre id="template"></pre>
<h3>Data</h3>
<pre id="data">
{
title: 'Oxygen precipitation in silicon',
rank: 25
}
</pre>
<h3>Parsed result</h3>
<pre id="output"></pre>
</body>
</html>
|
Download
