55

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

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

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

5 回答 5

104

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

在 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.prototype.format = function() {
  var args = arguments;
  return this.replace(/{(\d+)}/g, function(match, number) { 
    return typeof args[number] != 'undefined'
      ? args[number]
      : match
    ;
  });
};

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

于 2012-12-27T23:01:31.747 回答
10

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

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

于 2012-12-27T22:58:25.423 回答
9

Mustache.js 非常适合做模板。

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

于 2012-12-27T22:57:32.867 回答
7

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

http://json2html.com

于 2012-12-28T05:24:13.903 回答
0

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

我曾经使用过jQuery Templates，它很简单，但它不再主动了。

于 2012-12-27T23:01:54.420 回答