2012 年推荐的 jQuery 模板？ [复制]答案

【问题标题】：Recommended jQuery templates for 2012? [duplicate]2012 年推荐的 jQuery 模板？ [复制]
【发布时间】：2012-12-13 07:08:05
【问题描述】：

jQuery 模板已经被弃用了一段时间。

我有一些 JavaScript 对象形式的数据，我想将其格式化为 HTML 并附加到 DOM。现在最好的方法是什么？

我应该建立一个 HTML 字符串吗？
是否应该通过 jQuery 创建元素，例如 $('<li>',{id:'my-'+Id}).append($('<span>').text(myText)) ？
jQuery 模板是否有替代品或成熟的替代品？

【问题讨论】：

The API docs 显然更被弃用，他们说该功能“处于测试阶段”。
@bfavaretto：是的。说here 他们没有超过测试版。
对您的三个选项进行一些性能测试results。
显然我不能回答被标记为欺骗的问题，但如果你已经在使用lodash 或underscore，你可以使用他们的_.template 函数。很简单，支持转义。

标签： jquery html json templates

【解决方案1】：

这就是我在项目中的做法：

在您的 HTML 中定义一个模板：

<script type="text/template" id="cardTemplate">
<div>
    <a href="{0}">{1}</a>
</div>
</script>

使用 string.format 替换变量：

var cardTemplate = $("#cardTemplate").html();
var template = cardTemplate.format("http://example.com", "Link Title");
$("#container").append(template);

string.format:

String.prototype.format = function() {
  var args = arguments;
  return this.replace(/{(\d+)}/g, function(match, number) { 
    return typeof args[number] != 'undefined'
      ? args[number]
      : match
    ;
  });
};

很简单，你甚至可以组合模板。

【讨论】：

如何在必要时转义 HTML？在您的示例中，如果 {0} 包含双引号，您只会炸毁您的 HTML。
@Mark 你可以打电话给escape()。如果我需要做的不仅仅是几个小模板，我肯定会寻找更强大的东西。我只是把它放在这里作为一个可能有用的例子，就像它对我一样。
awesome.. 有一个疑问.. 为什么它需要放在
它没有。 stackoverflow.com/questions/4912586/…
Tom Gruner 有一个很好的 sn-p 用于从 mustache.js 中转义 HTML stackoverflow.com/questions/24816/…

【解决方案2】：

您绝对应该尝试Handlebars 和/或Mustache

我倾向于使用 Handlebars，但语法非常相似。

【讨论】：

【解决方案3】：

Mustache.js 非常适合做模板。

https://github.com/janl/mustache.js

【讨论】：

【解决方案4】：

一路模板，比尝试手动解析 JSON 容易得多。由于我对它做出了贡献，所以我偏爱 json2html，因为它不需要编译模板并且只使用 JSON 和 JavaScript。

http://json2html.com

【讨论】：

在这里提到的其他人中，我最喜欢这个。谢谢！

【解决方案5】：

我真的不喜欢使用 javascript 构建 html 元素，所以我建议你使用一些模板。
您可以找到模板列表和相关问题here。

我以前用jQuery Templates，很简单，但现在不主动了。

【讨论】：

如果另一个问题解决了这个问题，你应该投票关闭......
@sachleen 正如我所说，这不是同一个问题。这是一个相关的问题。这个问题是关于最好的方法。