如何将jQuery.tmpl模板渲染为字符串？

Question

如何将jQuery.tmpl模板渲染为字符串？

jquerytemplatesjquery-pluginsjquery-templates

13

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

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

我正在尝试将一个已有的应用程序从另一个模板引擎转换过来，我的代码需要先将模板渲染成字符串，然后再将其添加到DOM中。这是否可行？应该怎么做？

- Adam Lassek

想知道为什么jQuery没有添加更简单的方法来做到这一点。 - Anurag Uniyal

6个回答

13

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

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

- Nick Craver

这个几乎起作用了，需要更改为：var div = $("<div />"); $.tmpl(myTemplate, myData).appendTo(div); var content = div.html(); 给你点赞，因为你朝着正确的方向前进了。 - hofnarwillie

7

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缩小差距之前，我可能会等待。

- Adam Lassek

5

jQuery模板提供了$.template()（请参考源代码中的描述） - 它在使用您的数据缓存模板进行评估后返回字符串数组。我将从头开始编写（并从Chrome的控制台实验中学习），但您会得到整个想法。

Create and cache a named template function

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

Get your template function and invoke it with your data

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

- Victor

我相信当我提出这个问题时这并不是真的，所以感谢您的更新。 - Adam Lassek

https://github.com/BorisMoore/jquery-tmpl/commits/master/jquery.tmpl.js - 在2010年8月9日，它从“templates”重命名为“template”，因此在您提出问题时的最新版本中是正确的，并且在更早的版本中即可通过“$.templates()”使用，实际上是在2010年5月7日之后 https://github.com/BorisMoore/jquery-tmpl/commit/f2eab62ad2e796f375ece518b85824edeb40c980 可用。 - Victor

0

这个运行正确

    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

- pma_

0

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

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

这个idofelementwhereuwanttoappend是你的模板数据将被渲染的ID。

- mukut

你完全错过了问题的重点。我想在代码中将渲染的模板组合在一起，然后再进行DOM操作。 - Adam Lassek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- galileoMonkey · Accepted Answer

这里的回答对我没有帮助，但是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()。