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

Posted 2023-02-24

【中文标题】如何将 jQuery.tmpl 模板呈现为字符串？

【英文标题】：How do I render a jQuery.tmpl Template to a String?

【发布时间】：2011-04-28 19:49:00

【问题描述】：

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

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

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

【问题讨论】：

想知道为什么 jquery 没有添加更简单的方法来做到这一点

【参考方案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()

【讨论】：

现在我们有 Handlebars 用于编译的 Mustache 模板，我真的没有看到使用 jQuery.tmpl 的令人信服的理由

你能解释一下为什么 Handlebars/Mustache 模板比 jquery.tmpl 更合适吗？他们看起来和我很相似。

+1 表示“请注意，模板的最外层（根）元素被跳过”。拯救了我的一天。

【参考方案2】：

您可以通过将结果放入一个临时容器并获取它的 innerHTML 来做到这一点，如下所示：

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

【讨论】：

这几乎奏效了。需要是： var div = $(""); $.tmpl(myTemplate, myData).appendTo(div); var 内容 = div.html();投票支持朝着正确的方向前进。

【参考方案3】：

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

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

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

---

更新

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

我从 1,000 条预加载记录开始，并为它们生成了多次模板，并对结果进行平均。

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

我可能会等到 jQuery.tmpl 缩小这个差距再切换。

【参考方案4】：

jQuery 模板提供$.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

【讨论】：

当我问这个问题时，我很确定这不是真的，所以感谢您的更新。

github.com/BorisMoore/jquery-tmpl/commits/master/jquery.tmpl.js - 在 2010 年 8 月 9 日，它已从 templates 重命名为 template，因此在您提出问题时的最新版本中确实如此，并且可以在$.templates() 甚至更早，实际上是在 2010 年 5 月 7 日 github.com/BorisMoore/jquery-tmpl/commit/… 之后

【参考方案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>

将resul作为字符串获取的最简单方法是将模板包装在任何标签内，然后使用.html()函数

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

【参考方案6】：

你可以像这样准备模板数据

var tmplData = link:"your link",name:"yourname",count:5;
$("#idofelementwhereuwanttoappend").append($("#infoWindowTemplate").tmpl(tmpldata));

idofelementwhereuwanttoappend 是您的模板数据将在其中呈现的 ID。

【讨论】：

您错过了问题的全部要点。我想在 进行 DOM 操作之前将渲染的模板组合在一起。