如何使用文字DOM標記作為原型模板？

Question

原型的Template類使您可以輕松地將值替換為字符串模板。 我不想在我的代碼中聲明Template源字符串，而是要從DOM中提取源字符串。

例如，在我的標記中，我有一個元素：

<div id="template1">
  <img src="#{src}" title="#{title}" />
</div>

我想使用div元素的內部內容創建模板，因此我嘗試了以下操作：

var template = new Template($('template1').innerHTML);

問題是，當值沒有空格時，Internet Explorer的innerHTML表示將省略屬性值周圍的引號。 我也嘗試使用Element#inspect ，但是在Internet Explorer中，我得到了元素/子樹的非遞歸表示。

還有另一種方法來獲取子樹內容的模板友好表示嗎？

Answer 1

看起來您可以將模板源嵌入到textarea標簽（而不是div ，然后使用Element#value檢索它。

當然會使標記有些怪異，但對設計師來說仍然似乎相當友好。

此外，正如傑森（Jason）在對原始問題的評論中所指出的那樣，在文本區域中包含img標簽可防止虛假請求無效圖像。

Answer 2

進行救援：

您還可以內聯腳本：

 <script type="text/html" id="user_tmpl"> <% for ( var i = 0; i < users.length; i++ ) { %> <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li> <% } %> </script> 

快速提示：在頁面中嵌入具有未知內容類型的腳本（在這種情況下-瀏覽器不知道如何執行文本/ html腳本）將被瀏覽器以及搜索引擎和屏幕閱讀器忽略。 這是用於將模板潛入頁面的理想掩蓋設備。 我喜歡將這種技術用於快速處理的情況，在這些情況下，我只需要在頁面上放置一個或兩個小模板，而又希望它們又輕又快。

您可以從腳本中使用它，如下所示：

 var results = document.getElementById("results"); results.innerHTML = tmpl("item_tmpl", dataObject);