如何将jQuery.tmpl模板呈现给字符串？

jquery.tmpl的文档使用.appendTo在渲染过程中将模板插入DOM：

 $.tmpl( myTemplate, myData ).appendTo( "#target" ); 

我试图从另一个模板引擎转换现有应用程序，我的代码需要先将模板呈现为字符串，然后再将其添加到DOM中。 这可能吗？ 怎么做？

Answer 1

jQuery Templating提供了$.template() （参见源代码中的描述） – 它在使用您的数据评估缓存模板后返回字符串数组。 我是从头开始编写的（以及Chrome控制台中的实验），但你会得到完整的想法。

1. 创建并缓存命名模板函数

    $("template-selector").template("template-name"); 

2. 获取模板函数并使用您的数据调用它

    var tmpl = $.template("template-name"); // template function var strings = tmpl($, {data: {}}); // array of strings var output = strings.join(''); // single string 

Answer 2

这里的答案对我没有帮助，但Adam的回复让我走上正轨：任何jQuery包装元素都有一个.html()方法。

 var output = $( "#infoWindowTemplate" ).tmpl( city_data ).html() 

或者如果你需要文字……

 var output = $( "#infoWindowTemplate" ).tmpl( city_data ).text() 

但请注意，模板的最外层（根）元素被跳过，因此您应该使模板看起来像这样：

或者只使用jQuery outerHtml插件（ http://darlesson.com/jquery/outerhtml/ ）并将.html()替换为.outerHTML()

Answer 3

你可以通过将结果放在一个临时容器中并获取它的innerHTML来实现，如下所示：

 var str = $("
").append($.tmpl(myTemplate, myData)).html(); 

Answer 4

jQuery.tmpl返回一个包装在jQuery对象中的HTMLElement，它可以与旧模板系统中呈现的字符串相同的方式使用。

 var $template = $('#template'), html = $.tmpl($template, data).get(); 

我怀疑这可能实际上比常规字符串更快，但我还没有任何分析数据。

---

更新

我在Mustache.js和jQuery.tmpl之间做了一些基本的分析，并且统计数据看起来不太好。

我从1,000个预加载的记录开始，并为它们生成了几次模板，平均结果。

Mustache.js： 1783ms
jQuery.tmpl： 2243ms

我可能要等到jQuery.tmpl在切换之前缩小差距。

Answer 5

这工作正常

  var s = $.tmpl(url, dataContext).get()[0].data; 

我错了，上面的例子只有在返回的是其他的html时才有效。 如果是html我使用

  var s = $.tmpl(url, dataContext).get()[0].outerHTML 

编辑：经过一番挖掘后，我发现了Chrome和FF之间的差异（以上示例适用于Chrome）。

最后我找到了跨浏览器的工作方法，让我们假设我们想构建一个标签。 所以我们模板看起来像

  ${text} 

将字符串作为字符串的最简单方法是将模板包装在任何标记内，然后使用.html（）函数

  var t = '
${text}
' var d = {url: 'stackoverflow.com', text: 'best site'}; var html = $.tmpl(s, d).get()[0]; html = $(html).html(); // trick is here 

Answer 6

您可以像这样准备模板数据var tmplData = {link：“your link”，name：“yourname”，count：5}; $（ “＃idofelementwhereuwanttoappend”）追加（$（ “＃infoWindowTemplate”）TMPL（tmpldata）。）;

idofelementwhereuwanttotpend这个id将呈现您的模板数据。