XTemplate, URLs, and Quotes

[fabrizim]

Hi All-

Just a quick bit of info to hopefully save people some time.

When using Ext.XTemplate, I ran into some strange behavior when assign certain attributes to elements that had me puzzled for a while. It seems that src attributes for img tags, or href attributes for a tags are not always output as the extract string given. For example:



var data = {url:'some/relative/url'};
var tpl = new Ext.XTemplate('<img src="{url}" />');
var output = tpl.applyTemplate(data);


The above code will modify the url to an absolute url, and that is not always the desired behaviour.

To avoid this behaviour, you can change the quote style for the attribute from double quotes to escaped single quotes;



var data = {url:'some/relative/url'};
var tpl = new Ext.XTemplate('<img src=\'{url}\' />');
var output = tpl.applyTemplate(data);


This code will use the literal string provided in the data as the attribute value.

I have had to use this technique several times, for several tags, and it seems to work consistently.

Hope this helps someone out!

Best Regards-
Mark

[dj]

Running your example code
var data = {url:'some/relative/url'};
var tpl = new Ext.XTemplate('<img src="{url}" />');
var output = tpl.applyTemplate(data);
console.log(output); in FireBug yields in


<img src="some/relative/url" />


Do you have a web-page/another example where we could see the described behavior?

[SteveEisner]

Are you sure you're testing this correctly? Several browsers will automatically modify relative URLs into absolute URLs. If you inspect by hovering or right-click properties on the link, it will appear as an absolute but if you look at the DOM directly the url would still be relative...

[fabrizim]

Hmm...

I realize that the test code doesn't work. I do have an example of this happening, however it is not publicly available. It actually happens with absolute urls in the case I am looking at. In the abolve example, the url would be 'http://domain.com/some/test/path.gif'. When using double quotes, a '/' is prepended when the template is applied. When using escaped single quotes, it uses the literal string.

This may only happen in isolated situations. In any case, I just wanted to document it in the forum should anyone else come across this situtation.

I'll try for another few minutes to reproduce in a simple environment and show whats happening.

Best Regards-
Mark