Client-side templating frameworks to streamline using jQuery with REST/JSON [closed]

Question

I'm starting to migrate some html generation tasks from a server-side framework to the client. I'm using jQuery on the client. My goal is to get JSON data via a REST api and use this data to populate HTML into the page.

Right now, when a user on my site clicks a link to My Projects, the server generates HTML like this:

<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>

I'm changing this so that clicking My Projects will now do a GET request that returns something like this:

[
  {
    "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"
  }
]

I can certainly write custom jQuery code to take that JSON and generate the HTML from it. This is not my question, and I don't need advice on how to do that.

What I'd like to do is completely separate the presentation and layout from the logic (jquery code). I don't want to be creating DL, DT, and DD elements via jQuery code. I'd rather use some sort of HTML templates that I can fill the data in to. These templates could simply be HTML snippets that are hidden in the page that the application was loaded from. Or they could be dynamically loaded from the server (to support user specific layouts, i18n, etc.). They could be displayed a single time, as well as allow looping and repeating. Perhaps it should support sub-templates, if/then/else, and so forth.

I have LOTS of lists and content on my site that are presented in many different ways. I'm looking to create a simple and consistent way to generate and display content without creating custom jQuery code for every different feature on my site. To me, this means I need to find or build a small framework on top of jQuery (probably as a plugin) that meets these requirements.

The only sort of framework that I've found that is anything like this is jTemplates. I don't know how good it is, as I haven't used it yet. At first glance, I'm not thrilled by it's template syntax.

Anyone know of other frameworks or plugins that I should look into? Any blog posts or other resources out there that discuss doing this sort of thing? I just want to make sure that I've surveyed everything out there before building it myself.

Thanks!

Answer 1

Since posting this question, I have found many other templating options. I've listed many of them below. However, there was recently a jQuery templates proposal that may be the most promising solution yet. There is also a discussion about it on the jquery site. Here is the project location:

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

Other solutions I've come across include (in no particular order):

• 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 template system - PURE, EJS, jquery plugin?
• jQuery templating engines
• http://goessner.net/articles/jsont/