jQuery 模板渲染输出答案

【问题标题】：jQuery template rendered outputjQuery 模板渲染输出
【发布时间】：2010-11-15 19:29:26
【问题描述】：

当我将 HTML 元素作为字符串传递给我的对象时，它们不会在渲染时转换为元素，所以我的模板会像这样填充

<tr><td>"<img src="path/pic.png" />"</td></tr>

如果我传递 DOM 元素，那么我会得到

<tr><td>[Object HTMLImageElement]</td></tr>

如何才能将实际图像呈现为 DOM 元素？

使用 jQuery 模板插件应该有助于大大减少 HTML 字符串构建的使用。

编辑：下面的简单示例抓取 DOM 元素，然后将其提供给 jquery 模板，由 jquery 模板呈现。

源 HTML

<div id="source-id"><a href="http://link/to/this.file" title="foo">bar</a> <img src="path/pic1.png" />pic1_text <img src="path/pic2.png" title="picture 2" />pic2_text</div>
<div id="target-id"><div>

jquery 模板

<script type="text/x-jquery-tmpl" id="linkTemplate"><table><tr><td>${link}</td><td>${img}</td></tr></table></script>

jquery

var data = {
 'link': '',
 'img': ''
};
var source_data = $('#source-id');
data.link = $(source_data).find('a').eq(0).clone()[0];
data.img = $(source_data).find('img').eq(1).clone()[0];
$('#target-id').html($('#linkTemplate').tmpl(data));

输出

<table><td>http://link/to/this.file</td><td>[object HTMLImageElement]</td></table>

如您所见，AnchorElement () 已损坏且图像未显示。
JS fiddle example

【问题讨论】：

..我们在修复什么？提供一个您尝试过的示例。
你能发布你的jquery代码吗？
HTML 元素？具体来说，您指的是火、水、土还是空气？

标签： jquery string templates dom jquery-templates

【解决方案1】：

所以基本上问题是如何从 DOM 元素中获取底层 HTML。您可以为此使用outerHTML 属性：

data.img = $(source_data).find('img').eq(1).clone()[0].outerHTML;

应该将<img src="path/pic2.png" title="picture 2" /> 作为字符串返回。

更新 JQuery 模板引擎在显示之前自动转义值，以显示原始 html 而无需转义，您需要修改模板：

<script type="text/x-jquery-tmpl" id="linkTemplate">
    <table><tr>
        <td>{{html link}}</td>
        <td>{{html img}}</td>
    </tr></table>
</script>

（仍然需要outerHTML）

【讨论】：

并非如此。我首先使用字符串，结果是未渲染的 HTML 字符串，这就是我切换到 DOM 元素的原因。试试 JS fiddle 链接。
我也发现了这一点，并且我的代码按预期工作，但仍然给予您信任。 {{wrap}} 可以带对象，但是 html 字符串和更简单的{{html}} 更好。

【解决方案2】：

这是一些工作代码的示例：

<td class="test"></td>
<script>
  $('.test').append('<img src="path/pic.png">');
</script>

【讨论】：

这只是一个例子。我并不真正担心“有效”。