Project Description
JavaScript Fluent Html Builder is template engine for generate html
using javascript html object model and fluent interface.
div().Class("dark").Id("header")
<div class="dark" id="header"></div>
What for?
"<div id='" + x.id + "'>" + x.name + "</div>"
vs
div().Id(x.id).$(x.name)
Tags
var h = Htmls;
h.div() == <div></div>
h.a() == <a></a>
...
Attributes
There is two ways to set attributes,
1)Json
h.div({id:"header", "class":"dark"})
or
h.div().Attr({id:"header", "class":"dark"})
2)Fluent Interface
h.div().Class("dark").Id("header")
<div class="dark" id="header"></div>
Inner content
Also two ways
1) h.div("some text", h.p("another text"))
2) h.div().$("some text", h.p("another text"))
<div>some text<p>another text</p></div>
That's it.
Something like real world example
var tr = function(tag, items){
return h.tr(items.map(function(x){return tag(x);}));
};
h.Head = function(){
var args = Array.prototype.slice.call(arguments);
return tr(h.th, args);
};
h.Row = function(){
var args = Array.prototype.slice.call(arguments);
return tr(h.td, args);
};
var persons =
[{id:1,name:"First", balance: 100},
{id:2,name:"Second", balance: -200},
{id:3,name:"Third", balance: 300}];
with (Htmls) {
var htmlPart = table(
Head("Name", "Balance"),
persons.map(function(p){
return Row(p.name, p.balance).Id(p.id).Class(p.balance > 0 ? "green" : "red" );
}));
}
<table>
<tr><th>Name</th><th>Balance</th></tr>
<tr id="1" class="green"><td>First</td><td>100</td></tr>
<tr id="2" class="red"><td>Second</td><td>-200</td></tr>
<tr id="3" class="green"><td>Third</td><td>300</td></tr>
</table>