php - 通过 AJAX 模板化动态加载内容的最佳方法？

Question

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

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

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

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

2. 更新 JSON feed 以包含 html 字段，存储该帖子的完整 HTML(帖子内容已注入(inject)到模板中)。

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

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

Answer 1

您可以使用<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/