如何使用文字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);