How to build the DOM using javascript and templates?

Question

I am building an application where most of the HTML is built using javascript. The DOM structure is built using some JSON data structures that are sent from the server, and then the client-side code builds a UI for that data.

My current approach is to walk the JSON data structures, and call script.aculo.us's Builder.node method to build the DOM structure, and then append it to some element that is actually in the HTML sent from the server. Along the way, I am registering event listeners to the various elements that need them. This allows for a good amount of flexibility, and allows for a very dynamic interface.

However, I feel that it is not very sustainable, since the view logic (ie, the DOM structure) is so tightly coupled to the code that walks the data, and the event handlers, and the data that is kept in memory to maintain the state, and is able to communicate those changes back to the server.

Are there any template-like solutions that will allow me to divorce the DOM structure from the code that drives the app? Currently, my only library dependencies are prototype.js and script.aculo.us, so I would like to avoid introducing any large libraries, but any suggestions are welcome.

Thanks!

EDIT: For some reason, What good template language is supported in Javascript? didn't show up in the little search results when I was typing this question. It does, however, show up in the "Related" sidebar here.

I will read through some of the suggestions there, and if I find a solution, I will close this question. Otherwise, I will clarify this question with reasons why those solutions won't work for me.

Answer 1

There are some template solutions out there, but they aren't doing much more than you're doing already. jQuery has been doing some work along these lines, and some jQuery plugins have emerged as solutions. Prototype.js and others have solutions as well.

Some options include:

• Prototype Templates
• Ajax Pages

In general, Ext js has some pretty wild and tricked out stuff, including some templates, but you'd be adding yet another library. So many libraries are getting tossed around these days, and it's often so much simpler to implement a light and simple custom solution. Try creating some DOM objects on your own. If you've got JSON data, parse it into memory and run it through a function. It's actually a blast, and a lot of people are doing it.

Sidenote: What you're doing may be quite sustainable and maintainable. Keep in mind that when you send a page of HTML, the browser is putting a DOM structure into memory in roughly the same way that your javascript does. I don't particularly recommend any of these solutions. It sounds like you've made a nice little system for your specific needs, and I'd generally say that refining your design will be at least as valuable as moving to somebody else's pattern, with the added benefit of being able to create some of your own dependencies.

Sidenote: It's generally not advisable to generate the entire DOM on the client, at least not for many markets. Sometimes it's an A-OK solution, as it may be in your case, but it's worth a note of caution to the audience at large that this style of development is not always the best road to travel.

Answer 2

there are several 'template' plugins for jQuery:

• jsRepeater
• jTemplates
• noTemplate
• Template

There are some XSLT extras that do all transform in the client, but i don't think XSL is 'designer friendly' enough