Question

我已经看到过以更快的方式使用JQuery tmpl来创建字符串而不是DOM元素：http://riley.dutton.us/2010/10/12/jquery-templates-vs-jqote-2-a-followup.html

我似乎无法让它工作。我正在使用JQuery 1.6.4和GitHub的最新tmpl文件。我的代码如下 - 任何人都可以指出明显的错误吗？非常感谢。

JsonData是来自Web服务的响应，并且是正确形成的JSON - 我可以使用公开的认可将其绑定到tmpl并使用JQote2。

jQueryTemplate看起来像：

<script id="jQueryTemplate" type="text/x-jquery-tmpl">
    <li><span>${Name}</span><span>${ProductName}</span></li>
</script>

我的JS调用模板：

var myTemplate = $('#jQueryTemplate').template();
var html = myTemplate($, { data: JsonData }).join('');
$("#container").html(html);

我似乎因$（'＃jQueryTemplate'）而导致未定义.template（）;而这个错误：

Uncaught TypeError: Object 
<li><span>${Name}</span><span>${ProductName}</span></li> 
has no method 'join'

感谢您给予的任何帮助。

Answer 1

像这样定义你的模板;

$.template( "jQueryTemplate", "<li><span>${Name}</span><span>${ProductName}</span></li>" );

像这样呈现你的模板;

$.tmpl( "jQueryTemplate", JsonData ).appendTo( "#container" );

或

像这样定义你的模板;

<script id="jQueryTemplate" type="text/x-jquery-tmpl">
    <li><span>${Name}</span><span>${ProductName}</span></li>
</script>

像这样呈现你的模板;

$( "#jQueryTemplate" ).tmpl(JsonData).appendTo("#container" );

Answer 2

经过大量挖掘后，我终于找到了鲍里斯摩尔解释的这种方法的一个例子。谢谢鲍里斯的出色工作。 https://github.com/jquery/jquery-tmpl/issues/50

我创建了一个jsperf来比较这两种方法 - 它是我的第一个jsperf，所以希望它能正确设置以获得有意义的结果。它显示了巨大的差异。我想这取决于使用情况，但我的是非常基本的标记生成，所以字符串输出结合.html（）就可以了。 http://jsperf.com/jquery-tmpl-as-string

希望如果您发现自己需要提高性能并且没有机会切换到另一个模板引擎，这会有所帮助。

Jquery tmpl使用连接方法来提高速度

2 个答案: