Question

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

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

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

Answer 1

这里的答案对我没有帮助，但亚当的回复让我走上正轨：任何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() (see description in source code) - 它在使用您的数据评估缓存模板后返回字符串数组。我是从头开始编写的（以及Chrome控制台中的实验），但你会得到完整的想法。

创建并缓存命名模板函数

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

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

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

Answer 5

这可以正常使用

    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>

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

    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

Answer 6

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

idofelementwhereuwant将此ID用于呈现模板数据。

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

6 个答案: