-
Notifications
You must be signed in to change notification settings - Fork 3
/
README
59 lines (46 loc) · 2.29 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
Welcome to BabaJS - the most Comprehensive Javascript Template Engine
What is BabaJS?
BabaJS is an open source Javascript template engine/manager.
The basic concept is: Template + Data = HTML
Here is a simple example:
<!-- user template -->
<div class="user">
<span><%=data.userName%></span>
<%IF data.hasPic %>
<img src="<% return 'http://imgs.mydomain.com/'+ data.userPic; %>" />
<%ELSE%>
<span>Add User Pic</span>
<%ENDIF%>
<span>User Friends:</span>
<% var myUserName = data.userName; %>
<%LOOP for( var i=0; i< data.friends.length; i++ ) %>
<div class="friend">User <%=i%></div>
<% return this.includeTemplate("friend", window.getFriend( data.friends[i] ) ); %>
<%ENDLOOP%>
</div>
<!-- friend template -->
<div class="friend"><%=myUserName%> is friend with <%=data.userName%></div>
Javascript code to generate the HTML:
BabaJS.generateHTML({
templateName:"user",
requires:["friend"],
ready: function(html){
document.getElementById("test").innerHTML = html;
},
{userName:"me",
hasPic: true,
userPic: "me.jpg",
friends:["amir","baba","daniel","mia","yael"]}
);
The template manager will fetch the template if its not stored locally and its dependency templates and will call the ready callback when the HTML is ready.
or you can just do something even simpler like so:
var html = BabaJS.generateHTML("<div><%=data.userName%></div>",{userName:"me"});
document.getElementById("test").innerHTML = html;
Main Features
Sub Templating – you can include additional templates from other template as much as you like.
Dependency Management – BabaJS keep track about dependencies between templates and JS and CSS files to make sure all are loaded when needed.
Fast – BabaJS compiles the templates in order to achive fast execution.
Template Stack Variables – BabaJS allows you to define variables in the template tags and access them from anywhere in the template or from included templates.
Text Based - BabaJS is doing text manipulation and doesn’t work on the DOM elements, thus allowing it to work on Node.JS as well.
Template Manager – BabaJS is not only a template engine, but also a manager that provides API to add/remove and create dependencies between templates.
To learn more about the API: http://www.amirharel.com/2011/04/26/babajs/