jQuery template advanced merge

码农软件 · 软件分类 · 其他jQuery插件 · 2020-01-11 06:27:33

软件介绍

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.

本文地址:https://codercto.com/soft/d/23118.html

Web界面设计

Web界面设计

Bill Scott、Theresa Neil / 李松峰 / 电子工业出版社 / 2009年7月 / 80.00元

当前的Web已经进入崭新的时代!本书涵盖了在基于独一无二的Web环境下、在创建丰富体验的过程中设计Web界面的最佳实践、模式和原理。UI专家Bill Scott和Theresa Neil在他们多年实践经验和不懈探索的基础上,总结提炼出了Web界面设计的六大原理——直截了当、简化交互、足不出户、提供邀请、使用变换和即时反应,并以这六大原理为依托,以当今Web上各类开风气之先的流行网站为示例,向读者展......一起来看看 《Web界面设计》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

SHA 加密
SHA 加密

SHA 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具