2

在通过 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>

我以前使用的几种方法是：

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

    优点：所有模板 HTML 都可以在应用程序启动时使用。
    缺点：看起来很乱。如果模板很多，则作为 JavaScript 的包含文件会很大。我不喜欢将 HTML 存储在 JavaScript 中的想法。

  2. 更新 JSON 提要以包含一个html字段，存储该帖子的完整 HTML（帖子内容已注入模板）。

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

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

4

2 回答 2

2

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

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

于 2013-08-02T05:44:13.880 回答
0

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

如果您有一个更复杂的应用程序，我建议您将模板连同您的 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>"
}
于 2013-08-02T05:45:12.340 回答