Rendering content with HTML tags in Ractive.js

Question

I'm trying to include HTML tags in data rendered by Ractive.js (to auto-subscript chemical symbols, in case anyone cares), but Ractive just inserts the text rather than creating new DOM elements.

A minimal test case, adapted from the 60-second setup guide:

<script id='template' type='text/ractive'>
    <p>Hello, {{name}}!</p>
</script>

<script type="text/javscript">
    var ractive = new Ractive({
    el: 'container',

    template: '#template',

    data: { name: '<b>world</b>' }
});

As you can see in this JSfiddle, the result is Hello, <b>world</b> rather than the expected "Hello, world"

I'm guessing this is to do with the way Ractive handles expressions.. but I'm not yet at the point where the source makes much sense.

Any thoughts on how I could get the intended behaviour?

Answer 1

Yes! You can use the triple-stache:

<p>Hello, {{{name}}}!</p>

In traditional Mustache, this means 'don't escape the value of name'. Translated to Ractive, it means 'insert the contents as HTML rather than text.

Be aware that the HTML is not sanitised before insertion, so if name came from user input there's potential for XSS and other nasties: http://jsfiddle.net/rich_harris/4jBC8/.