JavaScript模板化：部分模板代碼應該如何組織？

我是JavaScript模板世界的新手。JavaScript模板化：部分模板代碼應該如何組織？

這裏我有一個頁面，其中我不知道應該如何組織模板代碼。

這是相關的HTML當第一次加載頁面：

... 
<table id="color-codes"> 
    <tr> 
    <td>red</td> 
    <td>#FF0000</td> 
    </tr> 
    <tr> 
    <td>blue</td> 
    <td>#0000FF</td> 
    </tr> 
    <tr> 
    <td>black</td> 
    <td>#000000</td> 
    </tr> 
</table> 
...

用戶可以添加顏色表。每次添加顏色時，瀏覽器都會向服務器發送一個AJAX請求。然後服務器返回一個同時具有顏色名稱和顏色代碼的JSON對象。

接收到JSON對象後，客戶端將使用JSON對象呈現模板（如下所示），然後將生成的DOM對象插入表的末尾。

錶行模板：

<tr id='tp-color-entry'> 
    <td class='color-name'></td> 
    <td class='color-code'></td> 
</tr>

問：我應該在哪裏把這個模板的代碼？在HTML文件中？還是JS文件？如果在HTML文件中，如何防止它干擾頁面展示/佈局？如果在JS文件中，我是否保存將它分配給一個變量？

請注意，我使用Pure爲JS模板和Django作爲我的服務器端。我總是試圖將HTML和JS代碼保存到單獨的文件中。

來源

2012-11-14 tamakisquare

你可以把它放在一個script標籤帶不認可type屬性：

<script type="text/x-pure-template" id="color-entry-template"> 
    <tr id='tp-color-entry'> 
     <td class='color-name'></td> 
     <td class='color-code'></td> 
    </tr> 
</script>

那麼它是一個簡單的事情來檢索模板：

document.getElementById('color-entry-template').textContent

來源

2012-11-15 06:11:38 icktoofay

啊〜這可以解釋爲什麼我看到一些人將他們的模板代碼放入帶有'text/html'類型的腳本標籤（瀏覽器不知道如何執行文本/ html腳本）。謝謝你，小夥伴。 – tamakisquare

JavaScript模板化：部分模板代碼應該如何組織？

回答

相關問題