
sweet-template
Sweet javascript template
Sweet (Simple WEb front-End Template) is a lightweight javascript template with high performance. It's small, fast, very easy to use, and, most important, extensible. It also has been integrated with jQuery.
See the template html below:
// Not like many other template tools, I use <[...]> as delimiters,
// but you can change delimiters to what you prefer by a little method...
var tpl = '<ul>'
// Here's two control flow, you can use any javascript expression in the template inline code
+ '<[foreach ($data as item) { if (item.showMe) { ]>'
// <[= value ]> is the assignment statement
+ '<li><[= item.name ]></li>'
+ '<[ } } ]>'
+ '</ul>';
Now we have a json data:
var data = [{showMe: true, name: "Jerry"}, {showMe: false, name: "Mark"}, {showMe: true, name: "Scotti"},
{showMe: true, name: "Carol"}, {showMe: false, name: "Tina"}, {showMe: true, name: "Owen"}];
We can do this to get a replaced html:
var html = Sweet(tpl).applyData(data);
html will be: "<ul><li>Jerry</li><li>Scotti</li><li>Carol</li><li>Owen</li></ul>"
Tutorial
1. Delimiters<[ ...expr... ]>
is statement tags, expr can be any valid javascript expression<[= valueExpr ]>
is assignment statement tags, valueExpr must be a right-value expression.But, you can use Sweet.setDelimiters() method to change delimiters to what you prefer:
// Use ... between delimiters Sweet.setDelimiters('<%...%>');
- Condition:
Just like javascript's if statement:
<[ if (condition) {]> Do something... <[ } else if (condition2) { ]> Do something else... <[ } else { ]> Do something else else... <[ } ]>
- Loop:
3. jQuery pluginJavascript has three types of loop statement: for index, for var, while. In sweet, you can use all of them:
<[ for (var i = 0, l = data.length; i < l; i++) { ]> Loop here... <[ } ]>
There's a more convenient loop statement in sweet that you can use: foreach// arrData must be an array type data, [as] is an optional expression, if you use [as item] after arrData, you can use a variable named item in loop body <[ foreach (arrData as item) { ]> <[= item.name ]> <[ } ]> // Or <[ foreach (arrData) { ]> // item of arrData must has an attribute 'name' <[= name ]> <[ } ]>
$("div").template(tplStr).applyData(data)
Sweet has been integrated with jQuery, and you can use it with any other js library.
.template( string or sweet object )
Initialize a sweet template to jquery element. use a template string or a sweet object as argument. This method will set a sweet object to jquery element. if no argument assigned, element's inner html will be used as template string.
.appendData( data, options ), .applyData( data, options )
Append | apply data to jquery element. After initializing jquery element with sweet object, you can use data with it very easy. A html string will be created from data, and append to (use appendData) or replaced to (use applyData) jquery element's inner html. You can use rendring and rendered callback to deal with data at runtime. Data could be a js array or object. If it is an array, sweet will iteratively generate html string:
// No need to use loop in template string $("ul").template("<li><[=name]></li>").applyData([{name: 'jerry'},{name: 'mike'},{name: 'claire'}]);
options:- scope: 'this' object in sweet template code.
- notIterate: if true, array data will not be iterated, you must add a loop expression to iterate data.
- rendering: a callback that will be called before data being applied. it has only one argument: context, see followed.
- rendered: a callback that will be called after data being applied. it has two arguments: dom, the dom element created from data; context, see followed.
4. Context variables and extensibilityThe context argument of appendData | applyData callback: * context.index: if an array data is applied, this field is current array index. * context.data: current applied data.
Since in sweet template you can use any javascript statement, global variables and even some lib like google closure, I do very few work in util function. there's only two context variables you may use in sweet: * $data
// Will use data object's name attributeThis is the data object you passed to sweet.prototype.applyData method ```
```
// Will also use data object's name attributeBut, most time there's no need to use this object, just: ```
``` * $util
// Same asThis is a util functions' connection, now there's only two methods...: ``` // $util.print, output value to where the method is called
// $util.trim, trim left and right space
<[ $util.trim(name) ]>
Don't worry about the functionality, sweet has extreme extensibility. there's three ways of extending sweet:
* Extend $util object. The $util object can be extended by using Sweet.extendUtil method.
Sweet.extendUtil({
// You can use $util.someUtilMethod in all your template
someUtilMethod: function() {}
});
* Pass a scope object to sweet.prototype.applyData method, the scope object will be use as 'this' object
var tpl = Sweet("
<[ this.someMethod(); ]>
"), scope = { someMethod: function() {} }; tpl.applyData(data, scope);
* Use other lib in sweet template..., in fact, you can use any code in sweet:
function someMethod() {}
var tpl = Sweet("<[ someMethod(); ]>
"); tpl.applyData(data); ```Project Information
- License: MIT License
- 18 stars
- svn-based source control
Labels:
javascript
template
web
front-end
UI