客户端模板框架,以简化使用REST/JSON的jQuery

Question

我开始将一些html生成任务从服务器端框架迁移到客户端.我在客户端上使用jQuery.我的目标是通过REST api获取JSON数据,并使用此数据将HTML填充到页面中.

现在,当我的网站上的用户点击指向My Projects的链接时,服务器会生成如下HTML:

<dl>
    <dt>Clean Toilet</dt>
    <dd>Get off your butt and clean this filth!</dd>

    <dt>Clean Car</dt>
    <dd>I think there's something growing in there...</dd>

    <dt>Replace Puked on Baby Sheets</dt>
</dl>

我正在改变这一点,以便单击My Projects现在将执行返回以下内容的GET请求:

[
  {
    "name":"Clean Car",
    "description":"I think there's something growing in there..."
  },
  {
    "name":"Clean Toilets",
    "description":"Get off your butt and clean this filth!"
  },
  {
    "name":"Replace Puked on Baby Sheets"
  }
]

我当然可以编写自定义jQuery代码来获取JSON并从中生成HTML.这不是我的问题,我不需要有关如何做到这一点的建议.

我想要做的是将表示和布局与逻辑(jquery代码)完全分开.我不想通过jQuery代码创建DL,DT和DD元素.我宁愿使用某些HTML模板来填充数据.这些模板可能只是隐藏在加载应用程序的页面中的HTML片段.或者它们可以从服务器动态加载(以支持用户特定的布局,i18n等).它们可以一次显示,也可以循环和重复.也许它应该支持子模板,if/then/else等等.

我在我的网站上有很多以不同方式呈现的列表和内容.我希望创建一种简单而一致的方式来生成和显示内容,而无需为我网站上的每个不同功能创建自定义jQuery代码.对我来说,这意味着我需要在jQuery(可能作为插件)之上找到或构建一个满足这些要求的小框架.

我发现的唯一一种类似于jTemplates的框架.我不知道它有多好,因为我还没用过它.乍一看,我对它的模板语法并不感到兴奋.

有人知道我应该研究的其他框架或插件吗？有没有讨论过这类事情的博客文章或其他资源？我只是想确保在自己构建之前我已经对所有内容进行了调查.

谢谢!

Answer 1

自发布此问题以来,我发现了许多其他模板选项.我在下面列出了很多.但是,最近有一个jQuery模板提案可能是最有希望的解决方案.在jquery网站上也有关于它的讨论.这是项目位置:

• http://wiki.github.com/nje/jquery/jquery-templates-proposal

我遇到的其他解决方案包括(没有特别的顺序):

• http://www.west-wind.com/weblog/posts/509108.aspx
• http://ejohn.org/blog/javascript-micro-templating/
• http://beebole.com/pure/
• http://archive.plugins.jquery.com/project/jTemplates
• http://archive.plugins.jquery.com/project/advancedmerge
• http://archive.plugins.jquery.com/project/tempest
• http://archive.plugins.jquery.com/project/jBind
• http://archive.plugins.jquery.com/project/cliche
• http://archive.plugins.jquery.com/project/appendDom
• http://archive.plugins.jquery.com/project/openSocial-jquery-templates
• http://archive.plugins.jquery.com/project/Orange-J
• http://archive.plugins.jquery.com/project/fromTemplate-microtemplate
• http://archive.plugins.jquery.com/project/resiglet
• http://archive.plugins.jquery.com/project/databind
• http://archive.plugins.jquery.com/project/jsont
• http://archive.plugins.jquery.com/project/domplate
• http://archive.plugins.jquery.com/project/noTemplate
• http://archive.plugins.jquery.com/project/jQueryHtmlTemplates
• http://github.com/trix/nano
• http://aefxx.com/jquery-plugins/jqote/
• http://ajaxian.com/archives/chainjs-jquery-data-binding-service
• http://ajaxpatterns.org/Browser-Side_Templating
• http://beebole.com/pure/
• http://code.google.com/p/google-jstemplate/
• http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
• http://embeddedjs.com/
• Javascript模板系统 - PURE,EJS,jquery插件？
• jQuery模板引擎
• http://goessner.net/articles/jsont/