Mustache template string inside render as HTML

Question

I am using Mustache to render templates.

I have this json object:

  {
    title: "Foo bar", 
    content: "<p> Html here </p>", 
    footer: "footer content here"
  }

I have a Mustache template like:

  <div id="box">
    <div id="title"> {{title}} </div> 
    <div id="content"> {{content}} </div> 
    <div id="footer"> {{footer}} </div> 
  </div>

My problem is that the html within the variable content is not getting rendered but instead is just getting printed to the screen.

I see (in non-view source window): <p> Html here </p> , where I would only want to see that if I viewed the page source.

How can I fix such that when I pass in a string to a mustache template the HTML inside gets rendered? I am calling mustache.render(templates.all,data); as my call to mustache.

Answer 1

From the Mustache documentation :

All variables are HTML escaped by default. If you want to return unescaped HTML, use the triple mustache: {{{name}}}.

So you just have to use eg. {{{content}}} in your template:

  <div id="box">
    <div id="title"> {{title}} </div> 
    <div id="content"> {{{content}}} </div> 
    <div id="footer"> {{footer}} </div> 
  </div>

Answer 2

I am using Mustache to render templates.

I have this json object:

  {
    title: "Foo bar", 
    content: "<p> Html here </p>", 
    footer: "footer content here"
  }

I have a Mustache template like:

  <div id="box">
    <div id="title"> {{title}} </div> 
    <div id="content"> {{content}} </div> 
    <div id="footer"> {{footer}} </div> 
  </div>

My problem is that the html within the variable content is not getting rendered but instead is just getting printed to the screen.

I see (in non-view source window): <p> Html here </p> , where I would only want to see that if I viewed the page source.

How can I fix such that when I pass in a string to a mustache template the HTML inside gets rendered? I am calling mustache.render(templates.all,data); as my call to mustache.