View on GitHub

tipJSP(JavaScript Page)

JavaScript template engine.

Download this project as a .zip file Download this project as a tar.gz file

<@ Features @>


<@ Quick example @>

Below is quick example how to use tipJSP.js:

var vdata = {
    name : "peku",
    age : 20
};

var html = tipJSP.render("<ul><li><@=name@></li><li><@=age@></li></ul>", vdata);
// output "<ul><li>peku</li><li>20</li></ul>"

<@ Try it! @>

The Data.
var vdata = {
  title : 'tipJSP template engine',
  name : 'peku',
  age : 20,
  money : 1000000,
  list : ['list1', 'list2', 'list3'],
  obj : {a:'obj1', b:'obj2', c:'obj3'}
};
The Template.
The Result.

<@ Installation @>

Node.js

npm install tipjsp -save

Web browser

<script src='tipJSP.js'></script>

<@ Express3 framework view system @>

app.engine( 'jsp', require('tipjsp') );
app.set('views', __dirname + '/views');
app.set('view engine', 'jsp');
// or
app.engine( 'jsp', require('tipjsp').setSep('<%', '%>') );
...

<@ Rendering @>

tipJSP.render(string, data)

template
<script type='text/tipJSP' id='template'>
<ul>
<@ for(var i=0; i<arr.length; i++){ @>
    <li><@= arr[i] @></li>
<@ } @>
</ul>
</script>
JavaScript
var vdata = {
    arr : ["peku1","peku2","peku3"]
};

var html = tipJSP.render(document.getElementById("template").innerHTML, vdata);
console.log(html);
output
<ul>
    <li>peku1</li>
    <li>peku2</li>
    <li>peku3</li>
</ul>

tipJSP.renderFile(path, data);

var vdata = {
    arr : ["peku1","peku2","peku3"]
};

var html = tipJSP.renderFile("./template.jsp", vdata);
console.log(html);

<@ Simple loop syntax @>

Array

template
<ul>
<@# i in arr @>
    <li><@= arr[i] @></li>
<@ } @>
</ul>
JavaScript
var vdata = {
    arr : ["peku1","peku2","peku3"]
};

var html = tipJSP.render(templateStr, vdata);
output
<ul>
    <li>peku1</li>
    <li>peku2</li>
    <li>peku3</li>
</ul>

Object

template
<ul>
<@# k in obj @>
    <li><@= obj[k] @></li>
<@ } @>
</ul>
JavaScript
var vdata = {
    obj : {a:"peku1",b:"peku2",c:"peku3"}
};

var html = tipJSP.render(templateStr, vdata);
output
<ul>
    <li>peku1</li>
    <li>peku2</li>
    <li>peku3</li>
</ul>

<@ Simple condition syntax @>

template
<@# input @> or <@# input == true @>
    <h1><@= value1 @></h1>
<@ } @>
<@# !input @> or <@# input == false @>
    <h1><@= value2 @></h1>
<@ } @>
JavaScript
var vdata = {
	input : true,
	value1 : 'true',
	value2 : 'false'
};

var html = tipJSP.render(templateStr, vdata);
output
<h1>true</h1>

<@ Extends @>

base.jsp
<html>
<body>
<h1>TITLE</h1>
<ul>
<@match child1@>
</ul>
<ul>
<@match child2@>
</ul>
</body>
</html>
index.jsp
<@extends base.jsp@>
<@match child1@>
<li>child1-1</li>
<li>child1-2</li>
<@match child2@>
<li>child2-1</li>
<li>child2-2</li>
JavaScript
var html = tipJSP.renderFile('index.jsp', vdata);
output
<html>
<body>
<h1>TITLE</h1>
<ul>
<li>child1-1</li>
<li>child1-2</li>
</ul>
<ul>
<li>child2-1</li>
<li>child2-2</li>
</ul>
</body>
</html>

<@ Includes @>

header.jsp
<h1>HEADER</h1>
body.jsp
<html>
<body>
<@ include header.jsp @>
</body>
</html>
output
<html>
<body>
<h1>HEADER</h1>
</body>
</html>

<@ Compile caching @>

tipJSP.setCache(true/false)

JavaScript
var vdata = {
    arr : ["peku1","peku2","peku3"]
};
var str = document.getElementById("template").innerHTML;
tipJSP.setCache(true); // enable/disable compile cache
var html = tipJSP.render(str, vdata);
// or
var html = tipJSP.setCache(true).render(str, vdata);

<@ Change seperator @>

tipJSP.setSep( start, end )

template
<ul>
<% for(var i=0; i<arr.length; i++){ %>
    <li><%= arr[i] %></li>
<% } %>
</ul>
JavaScript
var vdata = {
    arr : ["peku1","peku2","peku3"]
};
var str = document.getElementById("template").innerHTML;
tipJSP.setSep('<%', '%>');
var html = tipJSP.render(str, vdata);
// or
var html = tipJSP.setSep('<%', '%>').render(str, vdata);
console.log(html);

<@ String modifier @>

cr2(to)

// input = 'peku1\r\npeku2\rpeku3';
<@= input|cr2,'\n' @>
// output = 'peku1\npeku2\npeku3';

cr2br()

// input = 'peku1\r\npeku2\npeku3';
<@= input|cr2br @>
// output = 'peku1<br />peku2<br />peku3';

cutStrb(length[, reststr])

// input = '가나다abc';
<@= input|cutStrb,2 @>
// output = '가나...';
<@= input|cutStrb,5,'..' @>
// output = '가나다ab..';

date(dateformat)

// input = 1388556061000; // milliseconds or dateString
<@= input|date,'yyyy/MM/dd HH:mm:ss' @>
// output = '2014/01/01 15:01:01';
<@= input|date,'yyyy년 MM月 ddDay hh:mm:ss:ap',['Morning', 'Noon'] @>
// output = '2014년 01月 01Day 03:01:01:Noon';
<@= input|date,'yy-MM-dd hh:mm:ss:ap' @>
// output = '14-01-01 03:01:01:PM';

escapeHtml()

// input = '<h1>abc</h1>&\'"';
<@= input|escapeHtml @>
// output = '&lt;h1&gt;abc&lt;/h1&gt;&amp;&apos;&quot;';

escapeBackslash()

// input = 'a\\b\\c';
<@= input|escapeBackslash @>
// output = 'a\\\\b\\\\c';

numcomma([unit])

// input = 1234567;
<@= input|numcomma @>
// output = '1,234,567';
<@= input|numcomma,'원' @>
// output = '1,234,567원';

stripTag()

// input = '<h1>abc</h1>&\'"';
<@= input|stripTag @>
// output = 'abc&\'"';

trim()

// input = '  abc d ef  ';
<@= input|trim @>
// output = 'abc d ef';

<@ Custom user modifier @>

tipJSP.setModifier( object )

template
<div><@= num|double @></div>
<div><@= num|half @></div>
JavaScript
var vdata = {
  age : 20
};
var userModifier = {
  double : function( num ){
    return num * 2;
  },
  half : function( num ){
    return num / 2;
  }
};
var str = document.getElementById("template").innerHTML;
tipJSP.setModifier( userModifier );
var html = tipJSP.render(str, vdata);
// or
var html = tipJSP.setModifier( userModifier ).render(str, vdata);
console.log(html);
output
<div>40</div>
<div>10</div>

<@ Thanks @>