jQuery模板引擎[关闭]

204

我正在寻找使用客户端的模板引擎。我一直在尝试一些像jsRepeater和jQuery Templates的模板。尽管它们在FireFox中似乎可以正常工作，但当它们涉及到呈现HTML表时，它们似乎都在IE7中崩溃了。

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

关于要使用的其他模板引擎有什么建议吗？

jquery  templates  jsrender 
— 莫里斯
source
1
我想两次提出这个问题：）
— Mark Schultheiss 2010年
1
我会检查非常好的（但是beta版）JSViews和JSRender，看起来像是潜在的官方JQuery / UI模板引擎（至少这就是路线图所说的）
— Eran Medan 2012年
1
JsRender现在有一个公开测试版候选人：borismoore.com/2012/03/…–
— John Papa
我现在正在使用DoT模板，良好的性能以及像符号一样的“小胡子”
— Eran Medan 2012年

Answers:

109

查看Rick Strahl的帖子jQuery的客户端模板。他研究了jTemplates，但随后为John Resig的微模板解决方案提供了更好的解决方案，甚至对其进行了一些改进。比较好，样本很多。

— 爱比
source
3
github.com/jquery/jquery-tmpl是Resig的模板插件的实际仓库。
— 亚历山大·伯德
@ Thr4wn，repro的来源显然是链接文章中讨论的库。当然，都是由Resig制作的。
— Frank Schwieterman
@Frank“ repro的来源明显是链接文章中讨论的库”，是吗？说什么？完全不确定您的意思。
— Mark Schultheiss
2
@Mark：他的意思是“明显不同”。
— Domenic 2010年
我还没有看到用它构建复杂表格的任何例子。有没有人探索过要添加一行（整个模板的一部分）以在表单绑定对象数组的位置容纳新元素的过程？该模板将包括模板化数组的元素索引，并且可以适当地序列化以进行POST。但是我一直都无法思考。目标是类似InfoPath的功能。（我知道各种现有的infopath功能和替代方法。）
— Jason Kleban 2010年
47

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

  1. 它是由约翰·雷西格（John Resig）撰写的。
  2. 它将由jQuery核心团队维护为“官方”插件。 编辑：jQuery团队已弃用此插件。
  3. 它在简单性和功能性之间取得了完美的平衡。
  4. 它具有非常干净且经过深思熟虑的语法。
  5. 默认情况下，它会HTML编码。
  6. 它是高度可扩展的。

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

— 托德·梅尼尔
source
+1。但是我用里克·斯特拉尔的。Bcoz很小，可以很好地满足我的目的。
— IsmailS 2010年
刚刚宣布这是现在的官方插件
— serg 2010年
20
不幸的是，它已经贬值了。有分叉吗？
— OnesimusUnbound，2011年
3
我的意思是说，现在情况在2012年发生了变化吗，是否有更好的解决方案，可以使用在resig原始脚本之上开发的库进行模板制作？
— Rajat Gupta 2012年
4
@OnesimusUnbound它已由JS Render超级播种。github.com/BorisMoore/jsrender
— Blowsie
17

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>

测试页...

— 托马斯·马祖（Tomasz Mazur）
source
这并没有控制结构（如果和循环）
— mahemoff
11

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

— 克里斯·韦斯特
source
除了其局限性外，PURE还非常易于使用
— Jader Dias
@Jader，最痛苦的限制是什么？
— 麦克风
@Mic PURE受设计限制。在服务器端模板引擎中，您不必坚持使用有效的HTML，但是PURE基于HTML。但我认为有些怪癖可以使另一个javascript模板引擎与服务器端的引擎一样强大。
— 贾德·迪亚斯
@Jader，仅适用于HTML。但是我没有理解怪异和其他引擎的含义。
— 麦克风
@Mic PURE应该必须从头开始重写，以允许包括某些功能。要允许无效的HTML模板，您应该使用script属性type不同于的标记text/javascript。这是一个允许无效HTML的“怪癖”。
— 贾德·迪亚斯
7

这取决于您如何定义“最佳”，请在此处查看有关该主题的我的帖子

如果您寻求最快的速度，这是一个不错的基准，那么DoT似乎可以胜出，而其他所有人都将落在后面

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

第一部分：JQuery模板

Beta版的临时 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

这是最新的资料

其他资源

请注意，它甚至还没有进入beta测试阶段，只是一个路线图项目，但似乎很适合成为模板和UI绑定的官方JQuery / JQueryUI扩展。

— 伊朗棉兰
source
4

只不过是愚蠢的^^

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

— 莫洛可可
source
3

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

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

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

— 列维克
source
2

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

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

— 亚恩
source
1
有什么特别的叉子要寻找修复方法吗？
— 凯文·哈坎森
TBH，有点混乱…… 快速浏览变更并考虑到appendto是一家公司之后，我去了github.com/appendto/jquery-tmpl。YMMV
— Yann 2010年
jquery-tmpl已在官方1.4.3发行版中折叠。
— Yann 2010年
1

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

— 麦卡米
source
1

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

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

哦，语法简单。

— 多诺万·沃克
source
0

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

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

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

淘汰赛是这种方法的一个很好的例子，但是我自己并没有使用它，因此我将其留给选票来决定是否有人喜欢它。至少直到我有时间玩更多它。

列出的另一个答案是PURE是此方法的另一个示例。

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

— Studgeek
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.