jQuery 模板引擎
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/170168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery templating engines
提问by Maurice
I am looking for a template engine to use client side. I have been trying a few like jsRepeater and jQuery Templates. While they seem to work OK in FireFox they all seem to break down in IE7 when it comes down to rendering HTML tables.
我正在寻找一个模板引擎来使用客户端。我一直在尝试一些像 jsRepeater 和 jQuery 模板。虽然它们在 FireFox 中似乎工作正常，但在 IE7 中，当涉及到呈现 HTML 表格时，它们似乎都崩溃了。
I also took a look at MicrosoftAjaxTemplates.js (from http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766) but turns out that has the same problem.
我还查看了 MicrosoftAjaxTemplates.js（来自http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766），但结果发现存在同样的问题。
Any advice on other templating engines to use?
关于使用其他模板引擎的任何建议？
采纳答案by ewbi
Check out Rick Strahl's post Client Templating with jQuery. He explores jTemplates, but then makes a better case for John Resig's micro-templating solution, even improving it some. Good comparisons, lots of samples.
查看 Rick Strahl 的帖子Client Templating with jQuery。他探索了 jTemplates，然后为 John Resig 的微模板解决方案提供了更好的案例，甚至对其进行了一些改进。很好的比较，大量的样本。
回答by Todd Menier
Just did some research on this and I'll be using jquery-tmpl. Why?
刚刚对此进行了一些研究，我将使用jquery-tmpl。为什么？
- It's written by John Resig.
- It'll be maintained by the core jQuery team as an "official" plugin. EDIT: The jQuery team have deprecated this plugin.
- It strikes a perfect balance between simplicity and functionality.
- It has a very clean and well thought out syntax.
- It HTML-encodes by default.
- It's highly extensible.
- 它是由约翰·雷西格 (John Resig) 撰写的。
- 它将作为“官方”插件由核心 jQuery 团队维护。 编辑：jQuery 团队已弃用此插件。
- 它在简单性和功能性之间取得了完美的平衡。
- 它有一个非常干净和深思熟虑的语法。
- 它默认为 HTML 编码。
- 它是高度可扩展的。
回答by KevBurnsJr
jQote: http://aefxx.com/jquery-plugins/jqote/
jQote：http://aefxx.com/jquery-plugins/jqote/
Someone took Resig's micro-templating solution and packaged it into a jQuery plugin.
有人把Resig的微模板解决方案打包成一个jQuery插件。
I'll be using this until Resig releases his own (if he releases his own).
我将一直使用它，直到 Resig 发布他自己的（如果他发布自己的）。
Thanks for the tip, ewbi.
谢谢你的提示，ewbi。
回答by Tomasz Mazur
Template Engine
Basic Usage
Assuming you have following JSON response:
data = { user: { login: "tomek", first_name: "Thomas", last_name: "Mazur", account: { status: "active", expires_at: "2009-12-31" } } }you can make:
nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)and you get ready string:
<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>Test page...
模板引擎
基本用法
假设您有以下 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>测试页面...
回答by jonsequitur
jQuery-tmpl will be in the jQuery core beginning in jQuery 1.5:
从 jQuery 1.5 开始，jQuery-tmpl 将在 jQuery 核心中：
The official documentation is here:
官方文档在这里：
http://api.jquery.com/category/plugins/templates/
http://api.jquery.com/category/plugins/templates/
EDIT: It's been left out of jQuery 1.5 and will now be coordinated by the jQuery UI team, as it will be a dependency of the upcoming jQuery UI Grid.
编辑：它已被排除在 jQuery 1.5 之外，现在将由 jQuery UI 团队协调，因为它将成为即将推出的 jQuery UI Grid 的依赖项。
http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/
http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/
回答by Chris Vest
回答by Eran Medan
It depends on how you define "best", please see my post hereon the topic
这取决于你如何定义“最好”，请参阅我的文章在这里的话题
If you look for the fastest, here is a nice benchmark, it seems that DoTwins, and leaves everyone else behind
如果你寻找最快的，这里有一个很好的基准，看起来DoT赢了，让其他人都落后了
If you are looking for the most officialJQuery plugin, here is what I found out
如果您正在寻找最官方的JQuery 插件，这就是我发现的
Part I: JQuery Templates
第一部分：JQuery 模板
The beta, temporarily-officialJQuery template plugin was this http://api.jquery.com/category/plugins/templates/
测试版，临时官方的JQuery 模板插件是这个 http://api.jquery.com/category/plugins/templates/
But apparently, not too long ago it was decided to keep it in Beta...
但显然，不久前还决定将其保留在 Beta 版中……
Note: The jQuery team has decided not to take this plugin past beta. It is no longer being actively developed or maintained. The docs remain here for the time being (for reference) until a suitable replacement template plugin is ready.
注意：jQuery 团队已经决定不让这个插件超过测试版。它不再被积极开发或维护。文档暂时保留在这里（供参考），直到准备好合适的替换模板插件。
Part II: The next step
第二部分：下一步
The new roadmapseem to aim for a new set of plugins, JSRender(independent of DOM and even JQuery template rendering engine) and JSViewswhich have some nice data binding and observer / observable pattern implementation
在新的路线图似乎瞄准了新的插件集，JSRender（DOM的独立的，甚至JQuery的模板渲染引擎）和JSViews其中有一些很好的数据绑定和观察者/可观察的模式实现
Here is the blog post on the topic
这是关于该主题的博客文章
http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html
http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html
And here is the latest source
这是最新的来源
Other resources
其他资源
A nice presentation on the topic http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates
Working demos: http://borismoore.github.com/jsviews/demos/index.html
Note it's still not even in beta, and only a road map item, but seems like a good candidate to become an official JQuery/JQueryUI extension for templates and UI binding
请注意，它甚至还不是测试版，只是一个路线图项目，但似乎是成为模板和 UI 绑定的官方 JQuery/JQueryUI 扩展的不错选择
回答by molokoloco
Only to be the foolish ^^
只做傻瓜^^
// 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');
回答by levik
This isn't jsquery specific, but here's a JS-based templating library released by google as open source:
这不是特定于 jsquery 的，但这里有一个由谷歌作为开源发布的基于 JS 的模板库：
http://code.google.com/p/google-jstemplate/
http://code.google.com/p/google-jstemplate/
This allows using DOM elements as templates, and is re-entrant (in that the output of a template rendering is still a template that can be re-rendered with a different data model).
这允许使用 DOM 元素作为模板，并且是可重入的（因为模板渲染的输出仍然是可以使用不同数据模型重新渲染的模板）。
回答by Yann
Others have pointed jquery-tmpl, and I have upvoted those answer. But be sure to have a look at github forks.
其他人指出了 jquery-tmpl，我对这些答案投了赞成票。但是一定要看看github fork。
There are important fixes out there and interesting features too. http://github.com/jquery/jquery-tmpl/network
那里有重要的修复程序和有趣的功能。 http://github.com/jquery/jquery-tmpl/network
