Template rendering: triple mustache creates an invisible content

[laszlothewiz]

I wanted to insert a piece of code inside an SVG and nothing shows up. The code appears to be there but it looks like as if it was inserted in such a way that the browser didn't parse it.

I made a fiddle to demonstrate it: http://jsfiddle.net/DUB8K/2/

While at it, I found another bug: the attribute xlink:href gets changed to href. Which in this case doesn't yet cause an problem but it could be an issue with other SVG elements. This is also shown on the screenshot below.

As you can see in the screenshot the code inserted with triple mustache shows as greyed out in Firebug.

[Rich-Harris]

Good spot. Triples weren't working inside SVG elements because they use innerHTML under the hood, and SVG nodes don't implement innerHTML. Luckily you can work around it by wrapping the contents of the triple inside an SVG tag, which is what 182f646 does.

The xlink:href thing is actually working, it just looks like it isn't in the dev tools. In Chrome (it may be the same in Firebug, I'm not sure), if you select the <image> element and go to the console and do this, you'll see that the href attribute does actually have the correct namespace:

image = $0; // get a reference to currently selected element in HTML panel
image.getAttributeNS('http://www.w3.org/1999/xlink', 'href'); // returns the URL - correct namespace
image.getAttributeNS('http://www.w3.org/1999/xhtml', 'href'); // returns nothing - wrong namespace
image.getAttribute('href'); // returns the URL - namespace doesn't matter

Thanks for raising this - fixed now: http://cdn.ractivejs.org/edge/ractive.js (fiddle)

[laszlothewiz]

Awesome!!!

Thank you very much for quickly fixing this and the other issue (uppercase HTML tags). I tested the updated JS file in my project and it works perfectly!

[Ghostavio]

getAttributeNS is not an option on IE8 :/