JQuery 模板：将 html 参数传递给函数

Question

我有这个 JQuery 模板：

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

效果很好。但是现在我想给它传递一个html参数，但是下面的不行。

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

有什么建议吗？

Answer 1

您可以使用 {{html content}} 结构

$.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>

Answer 2

还有一种方法可以实现

var markup = "<span>${text}</span>";

jQuery.template( "template1", markup );
jQuery.tmpl( "template1", { text: "cool text" } ).appendTo( "div" );