通过 AJAX 模板化动态加载内容的最佳方式？答案

【问题标题】：Best way to go about templating dynamically loaded content via AJAX?通过 AJAX 模板化动态加载内容的最佳方式？
【发布时间】：2013-08-02 05:11:16
【问题描述】：

在通过 AJAX 加载内容的应用程序中（让我们以博客文章为例），在将加载的内容添加到 DOM 之前将其加载到 HTML 模板中的最合适的方法是什么？

例如，我可能会为我的帖子创建一个简单的 JSON 提要，如下所示：

[
    {
        "id": 1,
        "title": "Title 1",
        "time": "2nd August 2013",
        "content": "Post content here."
    },
    ...etc
]

以及我想用来表示帖子的模板：

<li data-id="{{id}}">
    <h3>{{title}}</h3>
    <small>{{time}}</small>
    {{content}}
</li>

我之前用过的几个方法是：

创建一个内容类型设置为 application/javascript 的 .php 文件，并将其作为脚本包含在页面上。使用 PHP 读取目录中的所有 HTML 文件并压缩其内容。将内容作为字符串存储在一个名为 HTML 的全局对象中，其中的键是 HTML 文件的名称。然后可以通过例如HTML["post.html"] 访问模板。加载帖子时，使用 JavaScript 将可全局访问的 HTML 字符串中的标记替换为帖子内容。

优点：所有模板 HTML 都可以在应用程序启动时使用。
缺点：看起来很乱。如果模板很多，则作为 JavaScript 的包含文件会很大。我不喜欢将 HTML 存储在 JavaScript 中的想法。
更新 JSON 提要以包含 html 字段，存储该帖子的完整 HTML（帖子内容已注入模板）。

优点：HTML 只会按需加载，而不是像第 1 步那样在启动时加载。JavaScript 不需要处理来更新模板。
缺点：JSON 变得更大。除了在 JSON 提要中使用纯粹的帖子相关数据之外，还有其他任何东西感觉很奇怪。每篇文章都重复相同的 HTML，这是不必要的。

不确定是否有更明显更好的方法来做到这一点。如果有，我想知道。理想情况下，模板将存储为单独的 HTML 文件，并且仅按需加载。

【问题讨论】：

您是在问应该将 HTML 模板存储在哪里，或者如何将 {{content}} 值发送到浏览器？
@BigToach 我想知道在将 HTML 添加到 DOM 以进行显示之前，加载 HTML 模板并使用异步加载的数据更新它们最合乎逻辑的方法是什么。

标签： php javascript jquery html templates

【解决方案1】：

您可以使用带有自定义type 属性的<script> 标记来存储您的模板。

<script type="text/template" id="template_post">
    <li data-id="{{id}}">
        <h3>{{title}}</h3>
        <small>{{time}}</small>
    {{content}}
    </li>
</script>

然后只需使用$('#template_post').html() 获取它。

这是正确的，很多 JS 框架都这样做模板。演示：http://jsfiddle.net/WAJmW/

【讨论】：

【解决方案2】：

这在一定程度上取决于您的应用程序的复杂性。我会更倾向于您的第一个解决方案。我通常以与存储应用程序的任何其他视图相同的方式存储模板。然后我将该文件包含在我的应用程序中的一个块中并以编程方式获取它。

如果您有一个更复杂的应用程序，我建议您将模板连同您的 JSON 数据一起返回，并让 javascript 解析 JSON 数据以及提供的模板。例如：

{
    "data": [
        {
            "id": 1,
            "title": "Title 1",
            "time": "2nd August 2013",
            "content": "Post content here."
        },
        ...etc
    ],
    "template": "<li data-id=\"{{id}}\"><h3>{{title}}</h3><small>{{time}}</small>{{content}}</li>"
}

【讨论】：