1

我正在尝试为我的团队简化复杂的设计过程。长话短说，我们的服务器在我们的单页应用程序中插入了一个隐藏的模板部分，这样我们就可以在 Backbone.js 应用程序中使用 DOM 节点而不是 JST 模板。我发现 jquery 的 .clone() 方法不喜欢某些属性。

当我使用$('.mainBillboard').clone()时，这个：

<div style="background-image: url({{ banner_url }})" id="mainBillboard">

...被克隆到这个：

<div id="mainBillboard" style="">

src='{{ image_url }}'我已经看到图像标签属性的类似行为。

请注意，如果我从 'style' 中去掉一个 'e'，那么 jquery 会完全按照原样克隆 DOM 元素。我找到了一种解决我们当前需求的方法，但我很好奇为什么 jquery 完全剔除这些属性。这是某种攻击保护（如反 XSS）吗？

4

1 回答 1

3

我猜您正在使用 Firefox 进行测试。当我使用这个时：

<div id="outerContainer">
    <div style="background-image: url({{ banner_url }})" id="mainBillboard">asdfasdf</div>
</div>

和这个：

console.log($('#outerContainer').html());
console.log($('#outerContainer').clone().html());

演示：http: //jsfiddle.net/ambiguous/YEPjL/

在 Safari 或 Chrome 中，我得到相同的输出，但是当我使用 Firefox 时，第二个有一个空style属性。但是，如果 HTML 看起来像这样：

<div id="outerContainer">
    <div style="background-image: url(does-not-exist)" id="mainBillboard">asdfasdf</div>
</div>

然后我到处都得到相同的输出。

演示：http: //jsfiddle.net/ambiguous/XukCa/

问题是它{{ banner_url }}不是一个有效的 URL，所以 Firefox 显然是在它尝试解析 HTML 时将其删除；即使您的 HTML 在隐藏的 a<div>中，浏览器仍然必须像处理正在显示的某些 HTML 一样解析和验证。

在 HTML 中嵌入模板的常用方法是使用<script>元素来阻止浏览器尝试解释它们。我建议您切换到这种结构：

<script type="text/html" id="tmpl-mainBillboard">
    <div style="background-image: url({{ banner_url }})" id="mainBillboard">asdfasdf</div>
</script>
<script type="text/html" id="tmpl-somethingElse">
    <!-- another template... -->
</script>

因此，每个模板都有一个<script type="text/html">（或者<script type="text/template">如果您愿意），然后您可以获取内容$('#tmpl-mainBillboard').html()并将该输出交给您的模板引擎进行解析。

演示：http: //jsfiddle.net/ambiguous/cZzW9/

最后一个演示为<script>Firefox、Chrome 和 Safari 中的块生成相同的输出。

于 2012-04-14T19:23:03.857 回答