javascript html 对象模型和模板引擎答案

【问题标题】：javascript html object model and template enginejavascript html 对象模型和模板引擎
【发布时间】：2011-02-23 15:10:59
【问题描述】：

我正在寻找可以做类似事情的 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>"

【问题讨论】：

你在说什么地狱？ :)
我想他想要某种用 JavaScript 编写的模板引擎，其语法类似于第一段，以生成类似于第二段的 HTML。
你想要一个模板引擎吗？当我们不清楚您的要求时，很难回答。

标签： javascript html json dom template-engine

【解决方案1】：

看看 Douglas Crockford 的 supplant() 方法：

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

【讨论】：

【解决方案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)

【讨论】：

【解决方案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);

【讨论】：

【解决方案4】：

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

【讨论】：