#tinyHtmlTemplate
This lib provide simple template through DSL like javascript declaration.
With it you can create your DOM in a minute, bind events, and create partial templates (or components). If there's errors, you know where they are because we trace it! Because you write in Javascript, no more runtime template syntax errors.
I've worked on the size of the lib to reach 2^11 bytes ( I still miss 10% :-( ), so it suits for project where page loading speed matters, network is slow etc. ( e.g. mobile website in third world ). Memory footprint is really small also.
In terms of performance, it beats any parsed template and proceed almost the same speed than native javascript. Get beaten by reactlike software if you have a lot of elements to update frequently
Using browserify:
$ npm install tinyHtmlTemplate --save
Then:
var Template = require('tinyHtmlTemplate').tinyHtmlTemplatetinyHtmlTemplate use a DSL-like structure and is very well suited for any language
which simplify the syntax of the context this.
For example with @ of coffescript, it rocks!
Well, this lib has been built like this because I work with coffeescript.
So it's very nice on it.
You can still use it on Javascript:
// No browserify = using window object
var Template = tinyHtmlTemplate;
// Render into the parent element. Can be anything.
var parent = document.getElementById("theParent");
Template.render(parent, function(){
this.div({id: "template"},function(){
this.text("Templating is so easy!");
this.a({href: "#"}, function(){
this.text("Click here to see binded event!");
this.on("click", function(evt){
alert("This is when I click the <a> element !");
});
})
this.p("You can also write the content like this", function(){
this.ul(function(){
this.li({innerHTML: "You can set html<br><strong>like this</strong>"})
this.li(function(){
this.text("Or like")
this.br();
this.span({style: { backgroundColor: "red", color: "white" }}, function(){
this.text("that.");
});
})
})
});
})
})Or with coffeescript
Template.render document.body, ->
@div id: "todo-list-component", ->
@ul className="todo-list", ->
for todo in todoList
@TodoView(todo)
You can create subtemplates and call them easily:
Template.register('Important', function(text){
this.strong("/!\\ " + text);
} );
Template.render(document.body, function(){
this.Important("This is an important message!");
})The properties are directly linked to HTMLElement. So if you want to set the
attribute class or for, you should use className or htmlFor
Get a look to the examples/todo folder for a ultra simple homemade MVC built
on top of this lib.
MIT.