JavaScript的模板，生成HTML

Question

的塊裏面我的JavaScript的AJAX功能，我生成HTML的塊如下：

$.each(data.pages, function(k, v) { 

    pageData += '<div class="entry activity page-panel event-item">'; 

    pageData += '<div class="page-panel-inner">'; 

    pageData += '<h2><a href="'+v.url+'">'+v.title+'</a></h2>'; 

    pageData += '<span class="date">'+v.date+'</span>'; 

    pageData += '</div>'; 

    pageData += '<a href="'+v.url+'"><img src="'+v.image+'" alt="'+v.title+'"></a>'; 

    pageData += '<div class="page-panel-inner event-item-details">';   
    pageData += '<p><strong>Location: </strong>Whitchurch</p>'; 
    pageData += '<p><strong>Time: </strong>18.00 - 22.00</p>'; 
    pageData += '<p><strong>Price: </strong>£31 for 10 weeks</p>'; 

    pageData += '</div>'; 
    pageData += '</div>'; 

}); 

我讀過一些關於JavaScript的模板，但不知道怎麼用在這種情況下的模板？有沒有更好的方法來在JavaScript中生成大塊的html？

道歉這不是一個有問題的問題與正確的答案我不知道還有什麼要問。

Answer 1

有很多不同的方式使用模板引擎，所以明白，這只是一個。有些系統使用「編譯」步驟將模板翻譯成JavaScript，而其他系統更像解釋器。我只親自熟悉一個（doT），這有點不尋常，所以我基本上只是爲了這個例子組成一個假裝系統。

某些模板引擎的一個常見技巧是將模板內容存儲在<script>標記中。聽起來很奇怪，就像我們回到了我們的起始位置，但在這種情況下，它是一個帶有「類型」的<script>標籤，導致瀏覽器忽略它作爲未知的腳本語言。 （請注意，這裏還有HTML5的<template>標籤，但我沒有太多的經驗與它和我不知道它如何妥善處理零碎的標記。）

所以：

<script id=robs-template type="text/html-template"> 
    <div class="entry activity page-panel event-item"> 
    <div class="page-panel-inner"> 
     <h2><a href="{{! it.url }}">{{! it.title }}</a></h2> 
     <span class="date">{{! it.date }}</span> 
    </div> 
    <a href="{{! it.url }}"><img src="{{! it.image }}" title="{{! it.title }}"></a> 
    <div class="page-panel-inner event-item-details"> 
     <p><strong>Location: </strong>Whitchurch</p> 
     <p><strong>Time: </strong>18.00 - 22.00</p> 
     <p><strong>Price: </strong>£31 for 10 weeks</p> 
    </div> 
    </div> 
</script> 

在模板中，{{ }}叢塊中的內容表示請求模板系統從參數對象中刪除內容。這個想法是，當模板系統被調用時，會提供一個參數對象（不知何故;取決於系統）。

要以「喂」它的模板系統，獲取該模板的內容，你可以用簡單的jQuery：

var templateCode = $("#robs-template").html(); 

與我編造的模板系統，你可能會在模板轉換成一些HTML準備注入頁面是這樣的：

var rendered = FakeTemplates(templateCode, { 
    url: "http://whatever", 
    title: "Something", 
    image: "http://cats.com/small-kitten1.jpg", 
    date: "12 Jun 2015" 
}); 

現在你在「渲染」的對象完全與模板輪廓數據的合併的變量已經有了。

一些模板引擎只直接對DOM操作，因此這可能看起來更像：

$("#place-to-put-stuff").fakeTemplates(templateCode, { 
    url: "http://whatever", 
    title: "Something", 
    image: "http://cats.com/small-kitten1.jpg", 
    date: "12 Jun 2015" 
});