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:

  1. programmatic or declarative template configurations
  2. external (another file) or local (a textarea tag) template loading
  3. debug mode
  4. support for datastore implementations
  5. automatic evaluation of the template when needed (ie. the model change) or immediate render
  6. 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.