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

原型的Template類允許您輕鬆地將值替換爲字符串模板。我不想在代碼中聲明模板源代碼字符串，而是想從DOM中提取源代碼字符串。如何使用文字DOM標記作爲原型模板？

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

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

我想創建一個div元素的內部內容的模板，所以我已經試過這樣的事情：

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

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

是否有另一種方法來獲得子樹內容的模板友好表示？

來源

2009-07-31 Duncan Beevers

不會在無效的URL，瀏覽器類型的扼流圈的圖像的`src`財產？ – jason 2009-07-31 21:35:20

Resig to the rescue:

您還可以內嵌腳本：
<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> 
快速提示：嵌入在你的頁面，有一個未知的內容類型（如這裏的情況腳本 - 瀏覽器不知道如何執行 text/html腳本）被瀏覽器 - 搜索引擎和屏幕閱讀器簡單地忽略了。這是一個完美的隱形設備潛行模板到您的頁面。我喜歡用這種技術來處理快速和骯髒的案件，我只需要一個小模板或兩個在頁面上，並希望光和快。

，你會用它從腳本像這樣：
var results = document.getElementById("results"); 
results.innerHTML = tmpl("item_tmpl", dataObject); 

來源

2009-07-31 22:04:39

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

當然，使標記有點奇怪，但它似乎仍然對設計師來說合理友好。

另外，正如Jason在對原始問題的評論中指出的那樣，在textarea中包含img標籤可防止對無效圖像的虛假請求。

來源

2009-07-31 21:49:26

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

回答

相關問題