jQuery template advanced merge
When receiving data from web service (in json or xml format), often is required to represent them with html code, and i found myself too many times writing infinite htmlStr += obj.name... and so on, so I decided to use a template engine for these cases. I found some render engines implementations, but again I faced some troubles, like template testing and template auto-merge when needed.
jQuery.advancedmerge is not a template engine, but an integration of a template engine (virtually any template engine can be used) and jQuery.
Here are the features:
- programmatic or declarative template configurations
- external (another file) or local (a textarea tag) template loading
- debug mode
- support for datastore implementations
- automatic evaluation of the template when needed (ie. the model change) or immediate render
- callbacks for before and after template merge
Some explanations:
1. You can configure the templates you use in your page via an external file, the declarative way, or passing an object to the init function (the programmatic way). It's up to you to decide which way to use, personally I prefer the declarative way but add the overhead to have an ajax-loaded file to be retrieved. I think that having an external file helps when you have many templates to handle.
2. For every template defined in the configuration object (or file), a template string must be found somewhere: if you choose to serve the templates as external files (which is my one i prefer) then the library will load via ajax the files, otherwise it search the document for a textarea that contains the template code. Again, if you have many templates, maybe having them in one page will be annoying.
3. When creating templates it's useful to have some kind of debug mode, so here it is: you have to override the default configuration (which is obvious set to false) and pass an object (or an external file) with some mockup data: the templates will be automatically merged with that data (and, if you specified a datastore configuration, than the mockup data will be setted there too)
4. One thing that comes up in my mind was to have a kind of repository for store the models of the templates, so that I would have a chance to know when a model has been modified and reevaluate the template. Again, the jQuery.advancedmerge plugin has little or no assumptions about the datastore implementation, he knows that he can save/update data and that the datastore can tell when a particular model has changed. Currently the default datastore implementation use the jQuery.data function, so the model is stored in some DOM element.
5. Thanks to the datastore interface, jQuery.advancedmerge is notified when a model change, and automatically updates the html of the template assigned to that model. You can of course also merge manually the template within a certain element.
6. Another missing feature in many (all?) javascript template engines is the possibility to have some functions to be called before and after the template merge. Here are my two words about this: functions that are called before the merge are served with the template id and the data that will be used to fill the template (actually a clone of that data), so here is a chance for the developers to modify or add some bits of data to the model. The functions called after the template merge (and render to the document) are served with the template id and the container element in which the template is rendered.