13

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

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

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

4

6 回答 6

17

这里的答案对我没有帮助，但是亚当的回答让我走上了正确的道路：任何 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()

于 2011-07-25T15:06:58.977 回答
13

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

var str = $("<div />").append($.tmpl(myTemplate, myData)).html();
于 2010-10-21T19:53:58.530 回答
7

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

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

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

更新

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

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

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

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

于 2010-10-21T21:11:54.570 回答
5

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
于 2013-07-25T10:33:29.523 回答
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
于 2011-07-20T10:20:00.477 回答
0

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

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

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

于 2013-02-25T08:27:33.147 回答