javascript html对象模型和模板引擎

Question

我正在寻找可做类似事情的javascript库

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>"

Answer 1

[查看Douglas Crockford的supplant()方法：

param = {domain: 'valvion.com', media: 'http://media.valvion.com/'};
url = "{media}logo.gif".supplant(param);

Answer 2

如果要使用jQuery：

var $ul = $('<ul />',{
    "class":" some-class",
    "id": "some-id"
});
$.each(items,function(index,value) {
    $('<li />').text(value).appendTo($ul);
});
$ul.appendTo($('body'))

尽管在这种情况下，您也可以使用纯JavaScript来做：

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)

Answer 3

John Resig具有出色的template系统。他用来说明其功能的示例正是您想要做的。

您可以使用具有以下语法的脚本来创建所需的输出：

<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>

并在javascript中通过以下调用提供数据：

var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

Answer 4

所以，我自己写。 http://jshtmlbuilder.codeplex.com/