How to create a DOM using javascript and templates?

Question

I am creating 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 code creates a user interface for this data.

My current approach is to follow the JSON data structures and call the script.aculo.us Builder.node method to build the DOM structure, and then add it to some element that is actually in the HTML sent from the server, along the way I register event listeners for the various elements that need them. This provides sufficient flexibility and provides a very dynamic interface.

However, I feel that it is not very stable, because the presentation logic (i.e. the DOM structure) is so closely related to the code that processes the data, and the event handlers, and the data that is stored in memory to save state and can transmit these changes back to the server.

Are there any template solutions that will allow me to parse the DOM structure with the code that runs the application? Currently, my only dependencies in the library are prototype.js and script.aculo.us, so I would like to avoid any major libraries, but any suggestions are welcome.

Thanks!

EDIT: for some reason. What good template language is supported in Javascript? didn't appear in small search results when I entered this question. However, it appears in the "Related" sidebar.

I will read some suggestions there, and if I find a solution, I will close this question. Otherwise, I will clarify this question with the reasons why these solutions will not work for me.

Answer 1

There are several template solutions, but they do not do more than you already do. jQuery does work on these lines , and some jQuery plugins have appeared as solutions. Prototype.js and others also have solutions.

Some options:

• Prototype Templates
• Ajax Pages

In general, Ext js has pretty nice wild and cheated stuff, including templates , but you would add another library . Nowadays, so many libraries drop out, and it is often much easier to implement an easy and simple custom solution. Try creating some DOM objects yourself. If you have JSON data, parse it in memory and run it through a function. This is actually a blast, and many people do it.

Sidenote: What you are doing can be quite sustainable and supported . Keep in mind that when submitting an HTML page, the browser puts the DOM structure into memory in much the same way as your javascript. I do not recommend any of these solutions. It appears that you have created a nice little system for your specific needs, and I would say that the specification of the design will be at least as valuable as a transition to any other pattern, with the added benefit of the opportunity to create some of your own relationships.

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

Answer 2

There are several template plugins for jQuery:

• jsRepeater
• jTemplates
• noTemplate
• Template

There are some XSLT add-ons that do all the transformations in the client, but I don't think XSL is “design friendly” enough

Answer 3

Your template can be encapsulated in a widget. The prototype has tools for creating add-ons, but I'm most familiar with how to do this in jQuery. At first I tried a prototype, but later I realized that jQuery has every prototype and much more. It also has additional add-ons / widgets / plugins created by the user community.

Builder is just a complement to the prototype. however, creating html DOM elements in jQuery is part of the core functionality.

http://docs.jquery.com/Core/jQuery#html in conjunction with: http://docs.jquery.com/Manipulation/append#content

here is an example of building some html and adding it to the jQuery element selection.

$(document.body).append($('<div id="sub-menu-holder" style="position:absolute;top:0;left:0;border:0px none;"></div>')); 

You can also get data structures from ajax calls and use them to create entities, or you can simply return the html from the ajax call and add it directly to the DOM in the appropriate place.

http://docs.jquery.com/Ajax/load#urldatacallback

Here is an example from the jquery download function documentation.

$ (Document) .ready (function () {$ ("# links"). Load ("/ Main_Page # jq-p-Getting-Started li");});

What is it. If your ajax call returns all the html you need to insert, and you know the id of the element where it is located, that’s all you need. Now you only need to figure out how to create html on the server side. Without knowing the specific details of what you are building, it is difficult to answer. But your server-side template engine does not need to know much about where the generated html will be placed.

Answer 4

If I understand this question, would you like to build a GUI dynamically, but based on predefined HTML templates? I know that it was often strange for me to create a DOM using JS when there was a completely good language (HTML) for that.

You can use XMLHttpRequests for XHTML template blocks, and then modify these blocks as needed in your code. When I did this, I find that this gives a more satisfactory separation of logic and presentation.

Answer 5

ExtJS has excellent template syntax: link text

Answer 6

QueryTemplates allows you to completely separate markup from logic. To achieve this, DOM and CSS selectors are used. It has a lightweight version for JavaScript (like the jQuery plugin) and a standard version that can generate its own JS code (without the library needed to execute it) . You need PHP to create the template with the standard version (the CLI version is fine). The library is based on phpQuery , the jQuery port for PHP.

You can see a demo of the JavaScript version . Using the standard version, you can gain experience on the client side inside PHP - there are DOM events, JSON support, even AJAX with JSONP.

Answer 7

If you use Script # , you can consider SharpTemplate , a highly typed, super-efficient HTML template engine.

Answer 8

You can look at soma-template, the syntax is pretty easy.

Pure DOM manipulation, many functions, natural syntax, fully extensible with other libraries, such as underscore.string, function calls with parameters, helpers, observers. The ability to update only certain nodes, if necessary, of templates within the DOM itself.

http://soundstep.github.com/soma-template/