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>

 

Last edited Dec 1, 2010 at 9:34 AM by dotneter, version 49