Faster, modular, unobtrusive development.
Just call javascript methods from HTML elements and make your HTML templates more readable.
Example :
<div id="somediv" class="getMyClass()" execPost="postProcess()" click="onClick"></div>
- Easy to use. Almost no learning curve.
- Separate javascript code from HTML templates.
- Pre-compiled. All the HTML templates are pre-compiled to native javascript instructions.
- Does all the heavy lifting.
- Load files automatically on demand.
- Cache HTML configurations for further use.
- Minify all the code.
To make most out of HTML templates, rakkar rather helps you write configurations to create HTML fragments in XML files like any HTML file.
A sample XML file :
<configs>
<!-- Import javascript file to use -->
<js>mytemplate.js</js>
<config id="my-reusable-template">
<div id="getMyId()" class="reusable-div">
<h1 condition="isHeading()">getHeading()</h1>
<p class="content">getContent()</p>
</div>
</config>
</configs>
var instructions = {
getMyId : function(data,$reusableDiv){
return data.reusablediv.id;
},
isHeading : function(data,$parent){
if(data.heading === 'example')
return true;
return false;
},
getHeading : function(data,$heading){
return data.div.heading;
},
getContent : function(data, $content){
return data.div.content;
}
}
Pre-compile your templates for faster use. Just use rakkar's node.js compiler.
node compile.js -aprop myAppProperties.js
*myAppProperties.js has 'source' and 'build' directory path of the application.
window.rakkar.createHTML(path,options).done(function(htmlCollection){
deferred.resolveWith(deferred,[htmlCollection]);
});
appendTo - Element to which HTML is to be appended.
contextData - Data object to be used in template.
instnName - Config id
prefetch - Prefetch the file
- condition - Take decision, whether to create this element or not, in element's attribute itself.
- execPost - Assign post-processor on any element.
- execPre - Assign pre-processor on element (under testing).
- toolTip - Attach tipTip.js toolTip on element.
- data - Put data in element.
- repeat - It is a special tag to ease loop structures in HTML templates.
repeat Example :
<ul>
<repeat repeatArray="getItemsList()">
<li>listItem.text</li>
</repeat>
</ul>
Catches
- Dot Notation - Dot(.) is preserved to get value from javascript object in HTML templates. To have a real dot (.) in text, you will have to escape it using cap (^) symbol.
- node.js to compile template on your machine.
metataste - A movie search and recommendation engine.
Note- Will provide more information and updates, as soon as possible.