jQuery template() for putting a URL into src= attribute of image

Question

i have a jquery template:

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

I compile it with this:

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

I render it with this:

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

the end result is this:

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

obviuosly I expected the URL to be in the src="" tag... but it is not (though it IS being outputted correctly after the tag). if I look at the anonymous function created by template(), I see that it isn't turning the src="${url}" into javascript. it is just encoding it as HTML and spitting it back out

what am I doing wrong?

Answer 1

Make sure you're using the latest version of the templates plugin, I have no issues using the latest plugin and either jQuery 1.4.2 or 1.4.3.

You can see the working demo of your code here.

Answer 2

what am I doing wrong?

Using a real <img>.

When you use attributes like <img src>, the browser may fix up your values to make them valid. So because the characters {} aren't valid in a URL, the browser may encode them to %7B%7D. This is probably browser-specific; Nick's example that he says works fails for me in Firefox. (It also fails in IE due to the missing var on test_template, but that's an unrelated issue.)

Remember when you write HTML elements, the HTML source is not maintained. The browser will parse it into a load of DOM nodes. When you call html() (innerHTML) what you get is a serialisation of those DOM nodes, which does not exactly preserve the formatting of the original markup. Especially when the original markup isn't really valid HTML but just a placeholder for templating.

For this reason I would not use actual in-page elements to template from, and I consider jquery-tmpl's encouragement of this with its $(element).template() method to be a mistake. That's not the only issue I with the plugin. For example if you put data() or an event handler on an element inside the template, that data/handler gets copied accidentally on IE but not other browsers, due to naïve innerHTML copying and jQuery's horrid node-identity hack.

So if you must use jquery-tmpl, use strings with it, not nodes. Use strings embedded in a <script> if you have to, but don't use actual in-page elements. (As well as this problem, it's also semantically questionable to have content in the document that isn't actual content.)