Mustache Rendering Issue with Javascript

Question

I'm just getting started using Mustache and I have this rendering problem. I send the data through a render function:

return Mustache.render(html, data);

or

return Mustache.to_html(html, data);

But the when I append it to a div like:

$('#jqt').append(html);

It gives back results like this, in actual text:

<div id="product_search_view">&lt;form class="search-form" &gt;&lt;ul class="rounded"&gt;&lt;li&gt;&lt;input type="text" id="label" name="search" placeholder="Enter what you are looking for"&gt;&lt;/li&gt;&lt;/ul&gt;&lt;a href="#" class="whiteButton submit" id="search-button" &gt;Search&lt;/a&gt;&lt;/form&gt;&lt;ul id="search-results" class="edgetoedge"&gt;&lt;/ul&gt;</div>

How can I get mustache not to put in those characters?

Answer 1

Seems like you passed an already parsed HTML to Mustache.

Here's a section of the documentation that addresses escaped characters and the use of the "triple mustache".

Also, here's another documentation. Read the Tag Types section and the use of the & to prevent escaping.

Answer 2

I also got this weird issue last time, and I got to this hacky solution from somewhere

var temp = Mustache.to_html(template, data_sources );

var correct_temp = $('<textarea />').html(temp).val();

$('#my_el').html(correct_temp);

Don't know if it's a good practice.