jQuery: Templating data

Question

I have a unique situation where I'm building a site that will call data via AJAX and load it into "containers" (basically just divs styled and arranged according to elements retrieved from the AJAX callback).

I'm not sure how many of these unique container types will be created (styled and rendered) when all is said and done, so I'm looking for a solution that will allow me to store containers in a separate file(s), load them dynamically as they are needed, populate the content, and rendered them on page.

I'm not sure if I should write my own loading/template solution or use an existing JavaScript template engine (e.g.: Pure).

The reason I'm hesitant to use an existing JavaScript template solution is they all seem focused on binding and looping on existing page elements, whereas I'm more concerned with the ability to load-up and binding to dynamic content.

Answer 1

I found http://code.google.com/p/trimpath/wiki/JavaScriptTemplates pretty useful for this.

Answer 2

After starting with JST, we moved to EJS:

http://embeddedjs.com/

It's more powerful, syntactically simpler, and you can put your templates in different files.

The website is pretty nice too.

Answer 3

You might want to give jQote a try, it's the most powerful jQuery templating engine as it let's you use scripting inside your templates.

Go check it out, it'll suit your needs, I promise.

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

Answer 4

I am planning to use jTemplates for a future project that will need to do something like this, it is very fast and has a nice jQuery plugin