Question

Prototype的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在对原始问题的评论中指出的那样，包括textarea中的img标记可以防止对无效图像的虚假请求。

Answer 2

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);

如何使用文字DOM标记作为原型模板？

2 个答案: