A lite but powerful javascript template engine
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 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 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 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 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'}});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" })); ``
- 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)
- Change parsing method for if to prevent infinite loops. See doc
- Can pass arguments to function
- Fix condition/loop attached to other condition/loop not working
- Expose API
- Add top var to loops to access initial context
- Improve compression
- Improve if/else performances
- Improve compression
- Fix imbriqued if, better parsing
- New interactive method, better parsing
- Fix loops containing a condition containing a loop not working
- Fix broken function call on minified version
- Clean the code
- Add filter to loops
- Update compression method
- Update unit test
- Fix nested loops not working properly when accessing to the value var
- Adding documentation
- First release
Created by Jérémy Barbe (c) 2011 tlite is distributed under the MIT license.