Tuesday, October 30, 2012

jQuery Deferred and client-side templating

I have been using quite a lot of Handlebars.js lately, and it has got me thinking about how to leverage $.Deferred (I recommend reading this article if you are not familiar with $.Deferred) to carry out simultaneously an ajax template request plus an ajax data request and to synchronise them.

I created this first jsFiddle

Here I am using $.when to register the callback to popup the content when both requests have completed.

Based on this, I then went on to create a second jsFiddle where UI.Templating and UI.Modal both handle either actual data or Deferred/Promise objects:

Well, it looks kind of funky, but is this level of flexibility actually useful?


  • we now change UI.Templating to take some form of a template identifier instead of the template source
  • we implement caching (per-page or LocalStorage) inside UI.Templating to cache the compiled templates

now we have the situation where, even if you've the data ready, sometimes we can present to UI.Modal the final html (template in cache), and sometimes we can only give it a Deferred/Promise object (template NOT in cache)!