代码之家 › 专栏 › 技术社区 › Duncan Beevers

如何使用文本DOM标记作为原型模板?

templates prototype dom internet-explorer javascript

Duncan Beevers · 技术社区 · 15 年前

原型的 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中,我得到了元素/子树的非递归表示。

是否有其他方法来获得子树内容的模板友好表示?

2 回复 | 直到 15 年前

Crescent Fresh nosklo 15 年前

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>
快速提示:在具有未知内容类型的页 (这里就是这样-浏览器不知道如何执行文本/html脚本)被忽略通过浏览器和搜索引擎以及屏幕阅读器。这是完美的用于隐藏模板的隐藏设备进入你的页面。我喜欢用这个快速脏箱技术我只需要一个小模板或两张纸,想要点什么轻快。

你可以从脚本中使用它所以:
var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

Duncan Beevers 15 年前

似乎可以将模板源嵌入 textarea 标记而不是 div 然后用 Element#value .

当然,这让标记有点奇怪,但对设计师来说仍然相当友好。

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

推荐文章

Abhishek Ojha · 为什么我的代码接受其他数据类型以及模板中的给定数据类型?[副本]

2 年前

TCD · 标准库非类型模板类是否显式实例化?

2 年前

onehundredquestions guy · 在不实例化的情况下将模板函数作为参数传递?[副本]

2 年前

sovesti · 参数较少的模板函数中的演绎

2 年前

KiraHoneybee · 具有构造函数参数的模板化类

2 年前

Seymore Glass · 模板不工作的默认参数

2 年前

Alex Hodges · 是否有一种更惯用的方法来专门化通过模板传递的标志的行为?

2 年前

Alexander Daum · 模板参数中对模板类型的引用

6 年前

ledonter · 为什么注入的类名有时不被视为类模板中的模板名?

6 年前

RBaum · 从WooCommerce“订单保留”和“新订单”电子邮件中删除订单

6 年前