Question

I have the following template

<script id="myTemplate" type="text/x-jquery-tmpl">
    <p>${{html Name}}</p>
    <p>${Format(Title)}</p>
</script>

and the javascript function Format()

function Format(Title){
 return "<b>" + Title + "</b>";
}

and the actual data

var data = { 
    Name: "<h3>Tom</h3>", 
    Title: "Mr."
};

The ${{html Name}} works to display html tags contained in “Name”. However, the HTML tags returned by my function “Format” are being rendered as text on my page. How can I return HTML from a function using JQuery tmpl?

Answer 1

Quoting the ${...} doc:

The values rendered by ${} are evaluated as strings, and are HTML
encoded. Any embedded markup will therefore be encoded. To insert the
unencoded markup in the rendered template, use instead the {{html}}
template tag.

So it can be fixed just with {{html Format(Title)}}.