Jquery clone（）似乎不适用于Mustaches

Question

我试图为我的团队简化一个复杂的设计过程。长话短说，我们的服务器将一个隐藏的模板部分插入到我们的单页应用程序中，以便我们可以使用DOM节点而不是JST模板作为我们的Backbone.js应用程序。我发现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）？

Answer 1

我猜你正在使用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位于隐藏的<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/

这最后的演示产生于火狐，Chrome和Safari的<script>块相同的输出。