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}}构造

＆＃13;

＆＃13;

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

＆＃13;

span {
  color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

还有一种方法可以做到这一点

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

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