Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jQuery 插件  >  正文 jQuery template advanced merge

jQuery template advanced merge

发布时间:2014-06-26   编辑:www.jquerycn.cn
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
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 configurationsexternal (another file) or local (a textarea tag) template loadingdebug modesupport for datastore implementationsautomatic evaluation of the template when needed (ie. the model change) or immediate rendercallbacks for before and after template mergeSome 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.

您可能感兴趣的文章:
jQuery template advanced merge
20款效果非常棒的 jQuery 插件小结分享
asp.NET中使用include
JQuery DataTable删除行后的页面更新利用Ajax解决
jTemplates
jquery.mustache.js使用
Tinymce+jQuery.Validation使用产生的BUG
php简单生成html静态页面代码
jquery Slideshow
php中的interface是什么意思

[关闭]