JQuery Templates: pass html parameter into a function

Question

I have this JQuery template:

$.tmpl('<p>${text}</p>', { text: 'cool text' }).appendTo('div');

Works great. but now I want to pass a html parameter into it, but the following won't work.

$.tmpl('<p>${text}</p>', { text: '<span>cool text</span>' }).appendTo('div');

Any suggestions?

Answer 1

You can use the {{html content}} construct

$.tmpl('<p>{{html text}}</p>', {
  text: '<span>cool text <b>bold</b></span>'
}).appendTo('div');

span {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<div></div>