I am looking for javascript library which can do something like
var items = [1, 2];
var html = div(
ul({
id: "some-id",
class: "some-class"
})(items.each(function(item) {
return li(item);
}));
html == "<div><ul id='some-id' class='some-class'><li >1</li><li>2</li></ul></div>"
Have a look at Douglas Crockford's supplant() method:
param = {domain: 'valvion.com', media: 'http://media.valvion.com/'};
url = "{media}logo.gif".supplant(param);
If you want to use jQuery:
var $ul = $('<ul />',{
"class":" some-class",
"id": "some-id"
});
$.each(items,function(index,value) {
$('<li />').text(value).appendTo($ul);
});
$ul.appendTo($('body'))
Although in this case, you can do it in pure javascript too:
var ul = document.createElement('ul');
ul.setAttribute('id', 'some-id');
ul.setAttribute('class','some-class');
for(var i in items)
{
var li = document.createElement('li');
li.innerText = items[i];
ul.appendChild(li);
}
document.body.appendChild(ul)
John Resig has a great template system. The example he uses to illustrate its capability is exactly what you want to do.
You can use a script with the following syntax to create the output you want:
<script type="text/html" id="user_tmpl">
<% for ( var i = 0; i < users.length; i++ ) { %>
<li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
<% } %>
</script>
And feed it data with the following call in javascript:
var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);
So, I write it by myself. http://jshtmlbuilder.codeplex.com/
