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

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 将其绑定(bind)。

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" );