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

jQuery模板提供 $.template() (see description in source code)

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
   

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

http://darlesson.com/jquery/outerhtml/ )并替换 具有 .outerHTML()

只需将结果放在一个临时容器中并获取其中的innerHTML即可,如下所示:

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

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

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

我怀疑这实际上可能比普通字符串快,但我还没有任何分析数据。

更新

我从1000个预加载的记录开始,多次为它们生成模板,平均结果。

胡子.js:
jQuery.tmpl号:

我可能要等到jQuery.tmpl弥合了这一差距之后才能切换。

这工作正常

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

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

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

编辑:经过一些挖掘,我发现Chrome和FF之间存在差异(上面的例子在Chrome中有效)。

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

    <a href='${url}'>${text}</a>

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

可以这样准备模板数据 $(“idofelementwhereuwanttoappend”).append($(“infoWindowTemplate”).tmpl(tmpldata));

IDofElementWhereuwant将在呈现模板数据的位置出现此id。