jquery - jQuery 模板引擎

Question

我正在寻找一个模板引擎来使用客户端。我一直在尝试一些像 jsRepeater 和 jQuery 模板。虽然它们在 FireFox 中似乎工作正常，但在 IE7 中，当归结为呈现 HTML 表格时，它们似乎都崩溃了。

我还查看了 MicrosoftAjaxTemplates.js （来自http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766），但事实证明也有同样的问题。

关于使用其他模板引擎的任何建议？

score 109 · Accepted Answer

查看 Rick Strahl 的帖子Client Templating with jQuery。他探索了 jTemplates，但随后为 John Resig 的微模板解决方案提供了一个更好的案例，甚至对其进行了一些改进。很好的比较，大量的样本。

score 47 · Accepted Answer

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

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

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

score 23 · Accepted Answer

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

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

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

感谢您的提示，ewbi。

score 17 · Accepted Answer

jQuery纳米：

模板引擎

基本用法

假设您有以下 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>

测试页面...

score 13 · Accepted Answer

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/

score 11 · Accepted Answer

11

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

于 2008-10-04T13:33:24.940 回答

score 7 · Accepted Answer

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

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

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

第一部分：jQuery 模板

测试版，临时官方的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

请注意，它甚至还不是测试版，只是一个路线图项目，但似乎是成为模板和 UI 绑定的官方 JQuery/JQueryUI 扩展的不错选择

score 4 · Accepted Answer

只做傻子^^

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

score 3 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

1

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

于 2009-05-18T14:35:38.573 回答

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

哦，还有简单的语法。

score 0 · Accepted Answer

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

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

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

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

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

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

score 0 · Accepted Answer

Dropbox在网站上使用John Resig 的模板引擎。他们稍作修改，您可以在Dropbox的这个js 文件中进行检查。在此文件中搜索 tmpl，您将获得模板引擎的代码。

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

score 0 · Accepted Answer

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

http://www.enfusion-framework.org/ （看看样本！）

score -1 · Accepted Answer

beebole 还重写了 PURE - jquery 纯 html 模板 - https://github.com/mpapis/jquery-pure-templates

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

jquery - jQuery 模板引擎

18 回答 18

模板引擎

Related

Reference