Question

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

例如，我可能会为帖子创建一个简单的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>

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

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

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

优点：HTML只会按需加载，而不是像第1步那样在启动时加载.JavaScript不需要处理来更新模板。
缺点：JSON变得更大。除了在JSON提要中使用的纯粹与帖子相关的数据之外，还有其他任何东西。为每个帖子重复使用相同的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/

Answer 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>"
}

通过AJAX模拟动态加载内容的最佳方法？

2 个答案: