Question

我正在寻找使用客户端的模板引擎。我一直在尝试一些像jsRepeater和jQuery模板。虽然它们似乎在FireFox中运行良好，但它们似乎在IE7中分解为渲染HTML表时。

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

有关其他模板引擎的建议吗？

Answer 1

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

Answer 2

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

由John Resig撰写。
它将由核心jQuery团队维护为“官方”插件。 编辑：jQuery团队已弃用此插件。
它在简单性和功能性之间取得了完美的平衡。
它有一个非常干净且经过深思熟虑的语法。
默认情况下进行HTML编码。
它具有很强的可扩展性。

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

Answer 3

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

有人采用了Resig的微模板解决方案并将其打包成jQuery插件。

我将使用这个，直到Resig发布他自己的（如果他发布他自己的）。

感谢小费，ewbi。

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>

测试页面......

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/

Answer 6

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

Answer 7

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

如果您寻找最快，这是一个不错的benchmark，似乎DoT获胜，并让其他所有人抛弃

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

第一部分：JQuery模板

beta，temporarily-official JQuery模板插件就是这样 http://api.jquery.com/category/plugins/templates/

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

注意：jQuery团队已经决定不将此插件用于测试版。它不再被积极开发或维护。文档暂时留在这里（供参考）直到合适替换模板插件准备就绪。

第二部分：下一步

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

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

Answer 8

http://garann.github.com/template-chooser/此链接对于选择Javascript基本模板非常有用。

Answer 9

只是愚蠢的^^

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

Answer 10

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

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

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

Answer 11

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

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

Answer 12

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

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

哦，简单的语法。

Answer 13

我使用的是模板jquery插件，但性能非常糟糕。我切换到了具有更好性能的修剪路径（http://code.google.com/p/trimpath/wiki/JavaScriptTemplates）。我没有注意到IE7或FF的任何问题。

Answer 14

如果您使用的是.NET Framework 2.0 / 3.5，那么您应该看看http://JsonFx.net实现的JBST。它具有客户端模板解决方案，该解决方案具有熟悉的JSP / ASP语法，但在构建时针对不需要在运行时解析的可压缩缓存模板进行预编译。它适用于jQuery和其他JavaScript库，因为模板本身被编译为纯JavaScript。

Answer 15

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

Answer 16

您可能想要想一想如何设计模板。

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

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

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

作为另一个答案列出的

PURE是这种方法的另一个例子。

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

Answer 17

Dropbox在网站上使用John Resig's template engine。他们稍微修改了一下你可以在这个js file的Dropbox中查看。在此文件中搜索tmpl，您将获得模板引擎的代码。

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

Answer 18

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

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

Answer 19

还有一个重写的PURE by beebole - jquery纯html模板 - https://github.com/mpapis/jquery-pure-templates

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

jQuery模板引擎

19 个答案:

模板引擎