代码之家 › 专栏 › 技术社区 › 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 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 文本区域中的标记可防止对无效图像的虚假请求。

推荐文章

Hala · 有没有什么方法可以将CSS属性设置为其他不兼容浏览器的属性的备用项?

3 年前

Error 1004 · 使用VBA从HTML中提取信息

7 年前

myroslav · IE11中Angular 4应用程序崩溃

7 年前

L Y E S - C H I O U K H Dumitru Boaghi · 在IE9/Angular 5/TypeScript上使用FormData,无需Ajax或jQuery

7 年前

Dhananjay C · Internet Explorer-表格上的CSS框阴影不适用于IE浏览器

7 年前

jacob · 当操作url为跨原点时,Microsoft浏览器不会将表单发布到iframe

7 年前

Athar K · 工具提示悬停上的过渡在IE上不起作用,在Google Chrome上效果很好

7 年前

adrien54 · 使用BlendColor过滤器的IE上的透明度问题

7 年前

Kathryn Crawford · ul元素上的伪元素在IE11中不起作用

7 年前

sankar · IE不显示abbr标记的边框底部

7 年前