javascript - 如何使用文字 DOM 标记作为原型(prototype)模板？

Question

原型(prototype)的Template类允许您轻松地将值替换到字符串模板中。我不想在代码中声明模板源字符串，而是想从 DOM 中提取源字符串。

例如，在我的标记中我有一个元素:

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

我想用 div 元素的内部内容创建模板，所以我尝试了这样的方法:

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

问题在于，当属性值不包含空格时，Internet Explorer 的 innerHTML 表示会忽略该属性值周围的引号。我还尝试使用 <a href="http://www.prototypejs.org/api/element/inspect" rel="noreferrer noopener nofollow">Element#inspect</a> ，但在 Internet Explorer 中我得到了元素/子树的非递归表示。

是否有另一种方法来获取子树内容的模板友好表示？

Answer 1

看起来您可以将模板源嵌入到 textarea 标记而不是 div 中，并使用 Element#value 检索它。

当然使标记有点奇怪，但它对设计师来说仍然相当友好。

此外，正如 Jason 在对原始问题的评论中指出的那样，在文本区域中包含 img 标记可以防止对无效图像的虚假请求。