jQuery模板引擎

Question

我正在寻找一个可用于客户端的模板引擎。我尝试了几个，如jsRepeater和jQuery Templates。虽然它们在FireFox中似乎工作正常，但当涉及呈现HTML表格时，它们似乎都无法在IE7中正常运行。

我还看了一下MicrosoftAjaxTemplates.js（来自http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766），但结果发现它也有同样的问题。

有没有其他模板引擎可以使用的建议？

- Maurice

---

我想要给这个问题点赞两次 :) - Mark Schultheiss

我会检查非常好的（但是预发布版）JSViews和JSRender，看起来像是一个潜在的官方JQuery/UI模板引擎（至少这是路线图上说的）。 - Eran Medan

JsRender现在有一个公共测试版本：http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html - John Papa

我现在正在使用DoT模板，性能很好，并且采用了Mustache的符号表示法。 - Eran Medan

Answer 1

请查看Rick Strahl的文章使用jQuery进行客户端模板化。他探讨了jTemplates，但随后更好地支持了John Resig的微型模板解决方案，并且还对其进行了改进。良好的比较，有很多示例。

- ewbi

---

http://github.com/jquery/jquery-tmpl 是 Resig 的模板插件的实际代码仓库。 - Alexander Bird

@Thr4wn，存储库中的源代码与链接文章中讨论的库明显不同。虽然两者都是由Resig编写的。 - Frank Schwieterman

@Frank，“在 repro 上的源代码明显比链接文章中讨论的库要重要得多。” 嗯，什么？你说什么？我完全不明白你的意思。 - Mark Schultheiss

@Mark：他的意思是“与显著不同”。 - Domenic

我没有看到任何使用这种方法构建复杂表单的例子。 有没有人探索过需要做什么，比如添加一行、整个模板中的某个部分，以容纳表单绑定对象数组中的新元素？该模板将包括模板化数组元素索引，并且可以适当序列化以进行POST提交。但是我在思考所有这些时遇到了问题。目标是像InfoPath那样的功能。 （我知道各种现有的infopath功能和infopath替代品。） - Jason Kleban

Answer 2

我刚做了一些相关研究，决定使用jquery-tmpl。为什么呢？

1. 它是由John Resig编写的。
2. 作为“官方”插件，它将由核心jQuery团队进行维护。 编辑：jQuery团队已经弃用了这个插件。
3. 它在简单性和功能之间取得了完美的平衡。
4. 它具有非常清晰和深思熟虑的语法。
5. 它默认进行HTML编码。
6. 它可以高度扩展。

更多信息请参见：http://forum.jquery.com/topic/templating-syntax

- Todd Menier

---

+1。但我使用的是Rick Strahl的，因为它很小而且很好地满足了我的需求。 - IsmailS

刚刚宣布，这现在是官方插件。 - serg

很遗憾，它已经被废弃了。有人复刻吗？ - OnesimusUnbound

现在的情况是否有所改变，也就是说，是否有更好的解决方案来使用建立在Resig原始脚本基础之上的库来进行模板化？ - Rajat Gupta

它已被JS Render取代。 https://github.com/BorisMoore/jsrender - Blowsie

@Blowsie，我知道这个并且在我的一个项目中使用过它。无论如何，感谢您在评论中添加了新链接以供将来参考。 - OnesimusUnbound

Answer 3

jQote：http://aefxx.com/jquery-plugins/jqote/

有人将 Resig 的微型模板解决方案打包成了一个 jQuery 插件。

在 Resig 发布自己的（如果他发布自己的）之前，我会使用它。

感谢 ewbi 的提示。

- KevBurnsJr

---

现在这个项目已经成为 jQote2：http://aefxx.com/jquery-plugins/jqote2/ - Alex Angas

Answer 4

jQuery Nano:

模板引擎

基本用法

假设您有以下JSON响应：

data = {
  user: {
    login: "tomek",
    first_name: "Thomas",
    last_name: "Mazur",
    account: {
      status: "active",
      expires_at: "2009-12-31"
    }
  }
}

你可以做到：

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

然后您会得到准备好的字符串：

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

测试页面...

- Tomasz Mazur

---

这不包括控制结构（if 和循环）。 - mahemoff

Answer 5

jQuery-tmpl将从jQuery 1.5开始成为jQuery核心的一部分：

http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

官方文档在这里：

http://api.jquery.com/category/plugins/templates/

---

编辑：它已经被从jQuery 1.5中删除，现在将由jQuery UI团队协调，因为它将是即将推出的jQuery UI Grid的一个依赖项。

http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/

- jonsequitur

Answer 6

我不确定它是否能解决您特定的问题，但还有一个名为PURE的模板引擎。

- Christian Vest Hansen

---

除了其限制，PURE非常易于使用。 - Jader Dias

@Jader，哪些限制最令人痛苦？ - Mic

@Mic PURE 的设计是有限制的。在服务器端模板引擎中，您不必遵循有效的 HTML，但 PURE 是基于 HTML 的。但我认为还有一些怪癖可以让另一个 JavaScript 模板引擎像服务器端的那些一样强大。 - Jader Dias

@Jader，好的，只做HTML就可以了。但是我不明白你所说的quirks和另一个引擎是什么意思。 - Mic

@Mic PURE 应该从头重新编写，以允许包括一些功能。要允许无效的 HTML 模板，您应该使用带有属性 type 不同于 text/javascript 的 script 标签。这是一种可以允许无效 HTML 的“怪癖”。 - Jader Dias

我曾经使用PURE一段时间，最近转向了官方的jQuery-tmpl。PURE不易阅读，许多同事在查看PURE时都向我寻求帮助。但是没有人需要在查看jQuery-tmpl时寻求帮助。 - gradbot

Answer 7

这取决于你如何定义“最好”，请参见我在该主题上的此处发帖

如果你寻找最快的，这里有一个不错的基准测试，看起来DoT胜出，并且甩开了其他所有人

如果你正在寻找最官方的JQuery插件，这是我发现的

第一部分：JQuery模板

暂时官方的beta版本temporarily-official JQuery模板插件是这个http://api.jquery.com/category/plugins/templates/

但显然，不久前决定将其保留在Beta版中...

注意：jQuery团队已决定不将此插件推出beta版。它不再被积极开发或维护。文档仍然在这里（供参考），直到一个合适的替代模板插件准备好为止。

第二部分：下一步

新路线图似乎旨在创建一组新的插件，JSRender（独立于DOM甚至JQuery模板渲染引擎）和JSViews，它们具有一些不错的数据绑定和观察者/可观察模式实现。

这是关于该主题的博客文章。

http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

这里是最新的源代码

• JSViews https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

其他资源

• 关于此主题的漂亮演示 http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• 工作演示：http://borismoore.github.com/jsviews/demos/index.html

请注意，它仍然不处于beta版本，并且只是路线图项目之一，但似乎是成为官方JQuery/JQueryUI模板和UI绑定扩展的一个很好的候选项。

- Eran Medan

Answer 8

只需要成为傻瓜 ^^

// LighTest TPL
$.tpl = function(tpl, val) {
    for (var p in val)
        tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || '');
    return tpl;
};
// Routine...
var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}],
    tplHtml = '<div>N°{id} - {title}</div>',
    newHtml    = '';
$.each(dataObj, function(i, val) {
     newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');

http://jsfiddle.net/molokoloco/w8xSx/ ;)

- molokoloco

Answer 9

这不是针对jQuery特定的事情，但这里有一个由谷歌作为开源发布的基于JS的模板库：http://code.google.com/p/google-jstemplate/。它允许使用DOM元素作为模板，并且可以再次进入（在模板渲染的输出仍然是可以使用不同数据模型重新渲染的模板中）。

- levik

Answer 10

其他人已经指出了jquery-tmpl，我也赞同这个答案。但一定要看看github的分支。

那里有重要的修复和有趣的功能。 http://github.com/jquery/jquery-tmpl/network

- Yann

---

有没有特定的分支需要查看以进行修复？ - Kevin Hakanson

说实话，有点乱... 我在快速浏览了更改后，并考虑到appendto是一家公司之后，选择了http://github.com/appendto/jquery-tmpl。你的情况可能会有所不同。 - Yann

jquery-tmpl已经被合并到官方1.4.3版本中。 - Yann