Syntax How To

Hello World Bcsic

var temp = new Jot('Hello, {name}');

// Hello, Hedger
temp.toString({name:'Hedger'});

Basic Html Escaping

// put exta @ before variable "name" to escape it.

var temp = new Jot('Hello, @{name}'); 

// Hello, &lt;Hedger&gt;
temp.toString({name:'<Hedger>'});

Adding extra snippets

var temp = new Jot('<h1>').add('Hello, {name}').add('</h1>');

// <h1>Hello, Hedger</h1>
var str = temp.toString({name:'Hedger'});

Boolean conditional logic

var temp = new Jot('Number is {value}')
               .when('{value} > 10').add(', greater than 10').endWhen()
               .add('.');

// Number is 100, greater than 10.
temp.toString({value:100});

// Number is 1
temp.toString({value:1});

Multiple conditions

var temp = new Jot('Number is {value}')
               .when('{value} > 10').add(', greater than 10')
               .elseWhen('{value} > 5').add(', between 5 ~ 10')
               .otherwise('{value} > 10').add(', lower than 5')
               .endWhen()
               .add('.');

// Number is 100, greater than 10.
temp.toString({value:100});

// Number is 9, between 5 ~ 10.
temp.toString({value:9});

// Number is lower than 5
temp.toString({value:1});

Iteration

var template = new Jot('<ul>')
               .each(3).add('<li>{$index}</li>\n').endEach()
               .add('</ul>');

// <ul>
// <li>0</li>
// <li>1</li>
// <li>2</li>
// </ul>
template.toString(); // From 0 ~ 2.

Iterating an Object

built-in variables

$key : {string} The iterated key.
$value : {Object?} The iterated value.
$index : {number} The current iterated index.
$last: {boolean} Whether the iterated item is the last item.
$first: {boolean} Whether the iterated item is the first item.

Examples

template = new Jot('<ul>\n')
               .each().add('<li>[{$index}] {$key} : {$value}</li>\n').endEach()
               .add('</ul>');

// <ul>
// <li>[0] 0 : x</li>
// <li>[1] 1 : y</li>
// <li>[2] 2 : z</li>
// </ul>
template.toString(['x','y','z']); // Array.

// <ul>
// <li>[0] n1 : x</li>
// <li>[1] n2 : y</li>
// <li>[2] n3 : z</li>
// </ul>

template.toString({n1:'x',n2:'y',n3:'z'}); // Object.

Nested Iteration

var template = new Jot()
    .a('{employeesTitle} \n')
    .each('employees')
    .a(' * ')
    .a('name : {name}').a(' | ')
    .a('mail : {mail} ')
    .a('\n').endEach();



var model = {
  employeesTitle:'Employees Info',
  employees:[
    {name:'Peter', mail:'peter@foo.com', level:1},
    {name:'Sam', mail:'sam@foo.com', level:2},
    {name:'Jane', mail:'jane@foo.com', level:3},
    {name:'Sarah', mail:'sarah@foo.com', level:4}
  ]
};


// Employees Info
//  * name : Peter | mail : peter@foo.com
//  * name : Sam | mail : sam@foo.com
//  * name : Jane | mail : jane@foo.com
//  * name : Sarah | mail : sarah@foo.com

template.toString(model);

More complicated logic

var users = [
  {'name':'kelly', age: 65},
  {'name':'peter', age: 9} ,
  {'name':'sam', age: 14},
  {'name':'judy', age: 30}
];
  var temp = new Jot();
  temp.add('<table border="1">')
      .a('<thead><th>name</th><th>age</th><th>category</th></thead>')
      .a('<tbody>')

      .each().a('<tr')// Each Row

      .when('{$first}').add(' class="first" ')
      .elseWhen('{$last}').add(' class="last" ')
      .endWhen()

      .not('{$index} % 2').add(' style="background:#ccc"').endNot()
      .a('>')

      .each()// Each Cell
      .a('<td>{$value}</td>')
      .endEach()

      .a('<td>')// Category cell
      .when('{age} < 20').add(' 0 ~ 20')
      .elseWhen('{age} < 40').add(' 20 ~ 40')
      .elseWhen('{age} < 60').add(' 40 ~ 60')
      .otherwise().add('60 or older')
      .endWhen()
      .a('</td>')

      .a('</tr>').endEach()
      .a('</tbody></table>');


// <table border="1"><thead><th>name</th><th>age</th><th>category</th></thead>
// <tbody>
// <tr class="first"  style="background:#ccc"><td>kelly</td><td>65</td><td>60 or older</td></tr>
// <tr><td>peter</td><td>9</td><td> 0 ~ 20 20 ~ 40 40 ~ 60</td></tr>
// <tr style="background:#ccc"><td>sam</td><td>14</td><td> 0 ~ 20 20 ~ 40 40 ~ 60</td></tr>
// <tr class="last" ><td>judy</td><td>30</td><td> 20 ~ 40 40 ~ 60</td></tr>
// </tbody></table>
var str = temp.toString(users);

Comment by JCampbell1, May 20, 2009

How is escaping handled? e.g. &,<,>,"

Comment by hedgerwang, May 21, 2009

Thanks for mentioning it. I'd put it to my TODO list. Now it does not support HtmlEscape?. Thanks.

Comment by akzhan.abdulin, May 24, 2009

Is JSON supported from box?

Sometimes templates loaded from serverside via JSON, so we need clean JSON (data-only) mode.

Comment by akzhan.abdulin, May 24, 2009

And we need data filters like html escape. uri encoding is second one.

Comment by hedgerwang, May 27, 2009

This works with JSON, and htmlEscape and uriEncoding are the TODOs.

Comment by hedgerwang, May 29, 2009

Update: Just had the HtmlEscape? working :-D

Comment by jesus.domingo, Jun 01, 2009

This is crazy! Love it!