我猜你正在使用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>
块相同的输出。
试试这个:http://jsfiddle.net/LUewe/2/ 也许这是html()方法? – 2012-04-14 10:26:45