rendering html

[tim-peterson]

this has to be a really simple problem, but am just not able to figure out why I can't render the "comment" html to make it bold.

here's the code:

$('button').on('click, function(){
var data={  "review_id": 7, "comment" : "<span style="font-weight:bold">hello</span>"};
    document.getElementById("commentList").innerHTML = tmpl("tmpl-comment", data);
});
</script>
<button>tmpl</button>
<ul id="commentList"></ul>
<script type="text/x-tmpl" id="tmpl-comment">

    <li id="{%=o.review_id%}">{%=o.comment%}</li>
</script>

any thoughts?

thanks,
tim

[blueimp]

Two things I noticed in your code:

You need to escape the quotes for the HTML attributes in your data object:

{
    "review_id": 7,
    "comment" : "<span style=\"font-weight:bold\">hello</span>"
}

Second, if you want to output HTML tags in your template variables, you have to use the non-escaping version (notice the # instead of the = in the second template tag):

<li id="{%=o.review_id%}">{%#o.comment%}</li>

See "Templates syntax" in the documentation:
https://github.com/blueimp/JavaScript-Templates/blob/master/README.md

Please note that you should only use the non-escaping version if your variables can be trusted (i.e. the variable doesn't print user defined content).

[tim-peterson]

awesome, thanks, problem solved!