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, <Hedger>
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);