Skip to content
Lite but powerfull javascript template engine
JavaScript
Latest commit a63ddbc Dec 14, 2011 @CapMousse Update syntax
Update syntax
Failed to load latest commit information.
.gitignore Change go 1.0.1 Dec 1, 2011
README.md Update syntax Dec 14, 2011
perf-test.html Update syntax Dec 14, 2011
tlite-min.js Update syntax Dec 14, 2011
tlite.js Update syntax Dec 14, 2011
unit-test.html Update syntax Dec 14, 2011

README.md

T-Lite

A lite but powerful javascript template engine

How To

Basics

Simply load tlite on your page

T-Lite work with two methods:

  • Find : replace vars in string (more fast for small template without loops/conditions)
  • Parse : find/replace var and do loops/conditions

Each method take two arguments :

  • A template string
  • A var object

In a template, a var is represented in that syntax : {varName}. If your var is an object, you can use the normal javascript notation to go down your object : {varName.otherElement.deepInTheObject}. The var object can contain any kind of elements: vars, object, array, function... Functions are automatically called when needed.

Tlite.find('Your small template with a {something.in.big.object}', { something : {in: {big: {object: 'tlite'}}}});

Condition

Condition can check if a var exists on the object, check the equality... Like vars, anything can be used in a condition statement :

Simple if
Tlite.parse('<tpl id:1 if:name>Hello {name}</tpl id:1>', { name: 'Mousse' });
// boolean var with 'pseudo' else
Tlite.parse('<tpl id:1 if:name>Hello {name} !</tpl id:1><tpl id:2 if:!name>Hello unknown !</tpl id:2>', { name: false });
// function var </tpl id:2>
Tlite.parse('<tpl id:1 if:name>Hello {name} !</tpl id:1><tpl id:2 if:!name>Hello unknown !</tpl id:2>', { name: function(){ return 'James' });
Complex if

Complex if can use comparison char in this list : ===, ==, !=, <=, >=. spaces are obligatory in your if tempalte ! Condition without space will not work !

// simple var
Tlite.parse('<tpl id:1 if:age <= 60>Hello {name} !</tpl id:1><tpl id:2 if:age >= 60>Hello old men !</tpl id:2>', { name: 'James', age : 21});
Tlite.parse('<tpl id:1 if:age <= medium>Hello {name} !</tpl id:1><tpl id:2 if:age >= medium>Hello old men !</tpl id:2>', { name: 'James', age : 21, medium : 60});
//function var
Tlite.parse('<tpl id:1 if:age <= 60>Hello {name} !</tpl id:1><tpl id:2 if:age >= 60>Hello old men !</tpl id:2>', { name: 'James', age : function(){ return this.person.age; }});

For

For automatically made a loop thought a given array/object. For give a key and value var to simply use result :

Tlite.parse('<tpl id:1 for:loop>{key}:{value}<br></tpl id:1>', {loop:['First', 'Second', 'Third']});
Tlite.parse('<tpl id:1 for:loop>{key}:{value}<br></tpl>', {loop:{name: 'Paul', age: 24, city: 'Paris'}});

You can access to the top context with the top var :

Tlite.parse('{for loop}{key}:{value}, {top.example}<br>{/for}', {loop:['First', 'Second', 'Third'], example: 'Try it!'});
Filters

Filters can remove one or multiple var from the current object. Each element you want to filter will be separated by a pipe:

Tlite.parse('{for loop|not|that}{key}:{value}<br>{/for}', {loop:{name: 'Paul', age: 24, not: 'Paris', that: 'Test'}});

Function

Vars containin a function will receive a context argument, representing the current level of parsed element. In a for, you can access to the key and value vars.

You can pass arguments to your function. It can be a string (for i18n services) or a other compiled var.

���`javascript Tlite.parse('{aFunction.aVar}', {aFunction: function(context, argument){ console.log(argument); return "Hey!" }, aVar: "A CAPITALIZED VAR" }));

Versions

2.0.0

  • Drop mustache syntax to a more redable sintax
  • Lightup the code
  • Drop else (because parsing LEVEL3 element with LEVEL2 match is not efficient and can make errors)

1.0.1

  • Change parsing method for if to prevent infinite loops. See doc
  • Can pass arguments to function

0.9.1

  • Fix condition/loop attached to other condition/loop not working

0.9

  • Expose API
  • Add top var to loops to access initial context
  • Improve compression

0.8

  • Improve if/else performances
  • Improve compression

0.7

  • Fix imbriqued if, better parsing

0.6

  • New interactive method, better parsing

0.5

  • Fix loops containing a condition containing a loop not working

0.4

  • Fix broken function call on minified version
  • Clean the code

0.3

  • Add filter to loops
  • Update compression method
  • Update unit test

0.2

  • Fix nested loops not working properly when accessing to the value var
  • Adding documentation

0.1

  • First release

About

Created by Jérémy Barbe (c) 2011 tlite is distributed under the MIT license.

Something went wrong with that request. Please try again.