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

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

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

夫妇方法我以前使用的是：

创建一个.php文件，其内容类型设置为application/javascript和i将其作为页面上的脚本排除。使用PHP读取目录中的所有HTML文件并压缩其内容。将内容作为字符串存储在名为HTML的全局对象中，其中的键是HTML文件的名称。然后可以通过HTML["post.html"]访问模板。加载帖子时，使用JavaScript将全局可访问的HTML字符串中的令牌替换为帖子内容。优点：所有模板HTML都可以在应用程序启动时使用。
缺点：似乎混乱。如果有很多模板，那么包含的JavaScript文件将会很大。我不喜欢HTML存储在JavaScript中的想法。
更新JSON供稿以包含html字段，存储该帖子的完整HTML（帖子内容已注入模板）。

优点：只会在需求时加载HTML，而不是像第1步中那样在启动时加载。JavaScript不需要进行处理以更新模板。
缺点：JSON变得更大。感觉奇怪的是除了JSON提要中使用的与纯后相关的数据之外的其他东西。为每个帖子重复使用相同的HTML，这是不必要的。

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

来源

2013-08-02 Marty

你问你应该在哪里存储HTML模板，或者如何将{{content}}值发送到浏览器？ – BigToach

@BigToach我想问什么是最合乎逻辑的方法加载HTML模板和更新它们与异步加载的数据之前，将HTML添加到DOM显示。 – Marty

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

如果您有更复杂的应用程序，我会建议将模板与您的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-02 05:45:12 BigToach

您可以使用<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-02 05:44:13 klkvsk

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

回答

相关问题