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?

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?

• javascript
• html
• ractivejs

Share Improve this question Follow asked May 7, 2014 at 10:14 supervacuosupervacuo 9,26222 gold badges4646 silver badges6161 bronze badges 1

• The JSFiddle does not render as expected for these browsers tried today. Why? Microsoft Edge 44.17754.1.0 and Google Chrome Version 69.0.3497.100 – user2063329 Commented Oct 1, 2018 at 3:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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/rich_harris/4jBC8/.