jQuery模板引擎

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

我还查看了MicrosoftAjaxTemplates.js (from http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766)，但结果发现它有同样的问题。

对使用其他模板引擎有什么建议吗?

92794 次浏览
小开

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

小开

这不是特定于jsquery的，但这里有一个由谷歌发布的开源的基于js的模板库:

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

这允许使用DOM元素作为模板，并且是可重入的(即模板呈现的输出仍然是一个模板，可以使用不同的数据模型重新呈现)。

小开
最佳答案

看看Rick Strahl的帖子jQuery客户端模板。他探讨了jTemplates，但随后对John Resig的micro-templating解决方案做了更好的说明，甚至对它进行了一些改进。很好的对比，大量的样本。

小开

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

小开

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

小开

jQuery纳米:

模板引擎

< em > < / em >基本用法

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

测试页面…

小开

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

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

我将一直使用它，直到Resig发布他自己的(如果他发布自己的)。

谢谢你的建议，ewbi。

小开

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

小开

刚刚做了一些研究，我将使用jquery-tmpl。为什么?

  1. 作者是约翰·瑞西格。
    2. 它将由jQuery核心团队作为“官方”插件进行维护。 jQuery团队已经弃用了这个插件
  2. 它在简单性和功能性之间取得了完美的平衡。
  3. 它有一个非常干净和经过深思熟虑的语法。
  4. 它默认使用html编码。
  5. 它是高度可扩展的。

更多信息在这里:http://forum.jquery.com/topic/templating-syntax

小开

其他人指出jquery-tmpl，我对这些答案投了好评。但一定要看看github fork。

这里有一些重要的修复和有趣的功能。 http://github.com/jquery/jquery-tmpl/network < / p >
小开

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的依赖项。

< a href = " http://blog.jquery。它/ 2011/04/16 / official-plugins-a-change-in-the-roadmap / noreferrer“rel = > http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/ < / >

小开

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

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

小开

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

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

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

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

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

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

小开

对于非常简单的工作，jquery-tmpl就足够了，但在某些情况下，它要求数据知道如何格式化自己(不好的事情!)

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

哦，还有简单的语法。

小开

只能做个傻瓜^^

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

小开

这取决于你如何定义“最好”，请参阅我关于这个主题的帖子在这里

如果你寻找最快，这里有一个漂亮的基准，似乎点胜出，并将其他所有人抛在后面

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

第一部分:JQuery模板

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

但显然，不久之前，它决定保持在Beta…

注意:jQuery团队已经决定不让这个插件通过beta测试。 它不再被积极地开发或维护。的文档 暂时留在这里(作参考)，直到合适的时机到来 替换模板插件已经准备好

第二部分:下一步

新路线图的目标似乎是一组新的插件，JSRender(独立于DOM，甚至JQuery模板渲染引擎)和JSViews，它们有一些很好的数据绑定和观察者/可观察模式实现

这里是关于这个主题的博客文章

http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html < a href = " http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html " > < / >

这是最新的消息来源

其他资源

  • 关于这个主题的一个很好的演示< A href="http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates">http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

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

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

小开

在网站上使用John Resig的模板引擎。他们做了一些修改，你可以在dropbox的js文件中查看。在这个文件中搜索tmpl，您将编写模板引擎的代码。

谢谢。希望对别人有用。

小开

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

http://www.enfusion-framework.org/(看样本!)


提交答案