jQuery模板引擎[关闭]

查看 Rick Strahl 的帖子 Client Templating with jQuery。他探索了 jTemplates，但随后为 John Resig 的 micro-templating solution 做了一个更好的案例，甚至对其进行了一些改进。很好的比较，大量的样本。

---

刚刚对此进行了一些研究，我将使用 jquery-tmpl。为什么？

这是约翰·雷西格写的。它将由核心 jQuery 团队作为“官方”插件维护。编辑：jQuery 团队已弃用此插件。它在简单性和功能性之间取得了完美的平衡。它有一个非常干净和深思熟虑的语法。它默认为 HTML 编码。它具有高度可扩展性。

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

---

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

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

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

感谢您的提示，ewbi。

---

jQuery Nano：

模板引擎基本用法假设您有以下 JSON 响应：data = { user: { login: "tomek", first_name: "Thomas", last_name: "Mazur", account: { status: "active", expires_at: "2009-12 -31" } } } 你可以： nano("

你好 {user.first_name} {user.last_name}！你的帐户是 {user.account.status}

" , data) 并且你准备好了字符串：

Hello Thomas Mazur！您的帐户活动

测试页面...

---

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/

---

不确定它如何处理您的特定问题，但还有 PURE 模板引擎。

---

这取决于您如何定义“最佳”，请参阅我关于该主题的帖子 here

如果您寻找最快，这是一个不错的 benchmark，似乎 DoT 获胜，其他所有人都落后了

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

第一部分：jQuery 模板

测试版，temporarily-official JQuery 模板插件是这个http://api.jquery.com/category/plugins/templates/

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

注意：jQuery 团队决定不让这个插件超过 beta。它不再被积极开发或维护。文档暂时保留在这里（供参考），直到准备好合适的替换模板插件。

第二部分：下一步

new roadmap 的目标似乎是一组新的插件，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 版，只是一个路线图项目，但似乎是成为模板和 UI 绑定的官方 JQuery/JQueryUI 扩展的不错选择

---

只做傻子^^

// 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/ ;)

---

这不是特定于 jsquery 的，但这是 google 作为开源发布的基于 JS 的模板库：

http://code.google.com/p/google-jstemplate/

这允许将 DOM 元素用作模板，并且是可重入的（因为模板渲染的输出仍然是可以使用不同数据模型重新渲染的模板）。

---

其他人指出了 jquery-tmpl，我赞成这些答案。但一定要看看 github forks。

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

---

John Resig 在他的博客上发布了一个。 http://ejohn.org/blog/javascript-micro-templating/

---

如果您在 .NET Framework 2.0/3.5 中工作，您应该查看由 http://JsonFx.net 实现的 JBST。它有一个客户端模板解决方案，该解决方案具有熟悉的 JSP/ASP 语法，但在构建时为紧凑的可缓存模板进行了预编译，这些模板不需要在运行时进行解析。它适用于 jQuery 和其他 JavaScript 库，因为模板本身被编译为纯 JavaScript。

---

我正在使用 jtemplates jquery 插件，但性能真的很差。我切换到了性能更好的 trimpath (http://code.google.com/p/trimpath/wiki/JavaScriptTemplates)。我没有注意到 IE7 或 FF 有任何问题。

---

对于非常轻松的工作，jquery-tmpl 就足够了，但在某些情况下，它要求数据知道如何格式化自己（坏事！）。

如果您正在寻找功能更全面的模板插件，我建议您使用 Orange-J。它的灵感来自 Freemarker。它支持 if, else, 循环对象 &数组，内联 javascript，包括模板中的模板，并具有出色的输出格式选项（maxlen、wordboundary、htmlentities 等）。

哦，还有简单的语法。

---

您可能需要考虑一下如何设计模板。

许多列出的模板解决方案（jQote、jquery-tmpl、jTemplates）的一个问题是它们要求您在 HTML 中插入非 HTML，这在 HTML 工具中或在与 HTML 设计人员的开发过程中可能会很痛苦.我个人不喜欢这种方法的感觉，尽管它有其优点和缺点。

还有一类模板方法使用普通的 HTML，但允许您使用元素属性、CSS 类或外部映射来指示数据绑定。

Knockout 是这种方法的一个很好的例子，但我自己没有使用它，所以我将它留给投票来决定其他人是否喜欢它。至少在我有时间多玩它之前。

列为另一个答案的 PURE 是这种方法的另一个示例。

作为参考，您还可以查看 chain.js，但它似乎自最初发布以来没有太多更新。有关它的更多背景信息，请参见 http://javascriptly.com/2008/08/a-better-javascript-template-engine/。

---

Dropbox 在网站上使用 John Resig's template engine。他们对它进行了一些修改，您可以在此 js file 的保管箱中进行检查。在此文件中搜索 tmpl，您将获得模板引擎的代码。

谢谢。希望它对某人有用。

---

我目前正在使用多 HTML 模板框架。这个框架使得在你的 DOM 中导入模板化数据变得更加容易。也很棒的 MVC 建模。

http://www.enfusion-framework.org/（查看示例！）

---

还有 beebole 对 PURE 的重写 - jquery pure html templates - https://github.com/mpapis/jquery-pure-templates

它应该允许更多的自动渲染，主要使用 jquery 选择器，更重要的是它不需要将花哨的东西放入 HTML。

---