Triples (Embedded HTML)

Ordinarily in a template, mustaches stand in for data, which is HTML escaped for sanitary purposes. But occasionally you need to insert chunks of HTML into your view – for that, we have the triple-stache: {{{content}}}.

Step 1

Try running this code:

ractive.set( 'content', '<a href="http://bit.ly/QOyWC1"><img src="/gifs/image.gif"/></a>' );

That was a short tutorial! When using triples, bear in mind that when their data changes, the nodes they represent must be removed from the DOM before being re-rendered and reinserted. For that reason, you shouldn't use triples where regular mustaches will do the same job – Ractive.js is able to operate more efficiently with mustaches.