4

我正要问这个问题（直到我发现它已经被问到了），现在有了这个问题的答案：

最好从 PHP 脚本请求 JSON，然后使用 JavaScript 将结果包装在 HTML 中。

现在我有一个不幸的任务是使用 JavaScript 生成 HTML 以附加到我的文档中，并且不知道如何最好地解决这个问题。

使用 PHP，我可以简单地存储一个 HTML 文件，然后使用file_get_contents()和正则表达式将一些标记替换为相关信息，但是我认为使用 JavaScript 并不那么容易。

我想到的一些方法：

  1. 令人厌恶的方法。生成一个巨大的丑陋字符串，然后附加：

    var html = '<div class="comment">' +
    '<strong>' + author + '</strong>: ' +
    '<p>' + content + '</p>' +
'</div>';

$("#comments").append(html);

  2. 将字符串存储在某处，然后在其上使用正则表达式，可能如下所示：

    var commentHTML = '<div class="cmt"><strong>{auth}</strong>: {cmt}</div>';

是否有一个库/插件可以更好地处理这个问题？我真的很想避免用存储在字符串中的 HTML 块来混淆我的 JavaScript。也许有与我提到的我使用 PHP 做的类似方法？JavaScript 可以读取 HTML 文件并将内容存储为字符串吗？

4

2 回答 2

4

恭喜，你刚刚发明了 Mustache.js。看看： https ://github.com/janl/mustache.js

var data = { author: "An Author", content: "Some content" };
var template = "<div class='cmt'><strong>{{author}}</strong>: {{comment}</div>";
var html = Mustache.render(template, data);
于 2012-04-12T03:33:58.480 回答
4

您可以将模板内联为具有任意类型的脚本

<script id="my-template" type="template">
    <div class="comment">
        <strong>%s</strong>:
        <p>%s</p>
    </div>
</script>

编写一个将“模板”转换为文档片段的函数很简单

function fragment(html) {
    var args = arguments,
        div = document.createElement('div'),
        i = 1

    div.innerHTML = html.replace(/%s/g, function(){
        return String(args[i++])
    })

    return div.firstChild
}

使用它也很简单

fragment(document.getElementById("my-template").textContent, author, comment)
于 2012-04-12T04:07:07.820 回答