用于将URL放入图像的src=属性的jQuery template（）

我有一个jquery模板：

<div id="test_template">
    <img src="${url}" width="31" height="32" alt="" />
    ${url}
</div>

我用这个来表达它：

test_template = $('#test_template').template();

$.tmpl(test_template, {url:'http://sstatic.net/stackoverflow/img/sprites.png'}).appendTo('#render_test');

最终结果是：

<div id="render_test">
<img height="32" width="31" alt="" src="$%7Burl%7D">   http://sstatic.net/stackoverflow/img/sprites.png</div>

http://sstatic.net/stackoverflow/img/sprites.png

显然，我希望URL位于src=”“标记中。。。但它不是（尽管它在标记后面正确输出）。如果我查看由template（）创建的匿名函数，我会发现它没有将src=“${url}”转换为javascript。它只是将其编码为HTML并将其输出

---

我做错了什么？

确保您使用的是最新版本的模板插件，我使用最新的插件和jQuery 1.4.2或1.4.3都没有问题

我做错了什么

使用真实的

，浏览器可能会修正您的值以使其有效。因此，由于字符

{}

在URL中无效，浏览器可能会将其编码为

%7B%7D

。这可能是特定于浏览器的；Nick说在Firefox中对我有效的例子失败了。（由于

test_template

上缺少

var

，它在IE中也会失败，但这是一个不相关的问题。）

请记住，在编写HTML元素时，不会维护HTML源代码。浏览器将把它解析成一堆DOM节点。当您调用

html（）

（

innerHTML

）时，您得到的是这些DOM节点的序列化，这并不完全保留原始标记的格式。尤其是当原始标记不是真正有效的HTML，而只是模板的占位符时

由于这个原因，我不会使用实际的页面元素来模板，并且我认为jQuery TMPL用它的代码> $（元素）。这不是我对插件的唯一问题。例如，如果将

data（）

或事件处理程序放在模板中的某个元素上，由于天真的

innerHTML

复制和jQuery可怕的节点标识攻击，该数据/处理程序会意外地在IE上复制，而不会在其他浏览器上复制

---

因此，如果必须使用

jquerytmpl

，请使用字符串，而不是节点。如果必须，请使用嵌入在

中的字符串，但不要使用实际的页内元素。（除了这个问题，文档中的内容不是实际内容在语义上也是有问题的。）

我用一个使用TmplItem的丑陋的黑客来解决这个问题：

        function fixRenderedTemplate(rendered){
            var fixArray = [["img", "src"], ["a", "href"]];
            for (var i=0; i<fixArray.length; i++){
                var tagName = fixArray[i][0];
                var attrName = fixArray[i][1];
                $(tagName, rendered).each(function(index, elem){
                    var data = $(elem).tmplItem().data;
                    var fixTemplate = unescape($(elem).attr(attrName));
                    var url = $.tmpl(fixTemplate, data).text();
                    $(elem).attr(attrName, url);
                });
            }
            return rendered
        }

函数fixtrenderedtemplate（渲染）{
var fixArray=[“img”，“src”]，[“a”，“href”]；
对于（var i=0；iThanks Nick.如果我将模板包装改为使用而不是…那么它就可以工作了！我在一个小时前下载了模板插件，但让我确保我有最新版本Nope，我有jquery 1.4.2，我从这里得到了模板代码：…仍然不工作（除非我使用标记）。为什么你的有效而我的无效？@Nick-可能是因为它所在的环境，浏览器已经在尝试使用该模板的源代码。为了安全起见，我会使用
标记，这样浏览器甚至不会尝试解析内容。好的一点……无论如何，这最终是正确的答案。谢谢！是的，但看看在中发生了什么ff4使用相同的JSFIDLE链接，您得到转义的模板代码，好吗？