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

Question

对于文档jquery.tmpl用途.appendTo插入模板到在渲染过程中的DOM:

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

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

Answer 1

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

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

或者如果你需要文字......

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

但请注意,模板的最外层(根)元素被跳过,因此您应该使模板看起来像这样:

  <script id='infoWindowTemplate' type='text/x-jquery-tmpl'> 
    <div class='city_info'>
      <h1 class='title'><a href="${link}">${name}</a></h1>
      <p class='meta'>${count} offers</p>
    </div>
  </script> 

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

Answer 2

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

var str = $("<div />").append($.tmpl(myTemplate, myData)).html();

Answer 3

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 4

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

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

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

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

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