有關通過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模板動態加載內容的最佳方法？

回答

相關問題