jQuery pattern for DOM building (from strings)?

[Colin Clark]

Hey all,

On 11-Sep-08, at 1:46 PM, Antranig Basman wrote:

> Dear Noah - this kind of complex conditional DOM building + attachment
> model is just the sort of application that the upcoming Fluid
> Renderer (based on a certain "classical" web framework you may
> have met) will be aimed at. Some initial documentation is at
> http://wiki.fluidproject.org/display/fluid/Fluid+Renderer
> which we will be aiming to put into a kind of "usable preview"
> mode for the 0.5 release, with more serious uses in 0.6.


The Renderer will indeed be pretty useful in such cases, once it's  
ready. In the meantime, I imagine some practical techniques might be  
helpful. ;)

We have several components that do some self-rendering in cases where  
the user-supplied markup is missing stuff. One of the problems with  
rendering a whole blob of markup inside your JavaScript code is that  
it's locked off from your users. They can't change the markup or  
adjust it if necessary.

Without a templating system, the technique we've used is to provide a  
user-configurable "renderer" function. We supply a good default, but  
if people want to change the markup that is produced, they can supply  
their own renderer function that generates the desired structure.

That way, we take into account Eli's good point about how string  
concatenation is faster than doing DOM injection element-by-element,  
but without locking up the markup away from the user. It also helps to  
break up your self-rendered markup into manageable chunks.

Take a look at the Inline Edit component for an example of how this is  
done:

https://source.fluidproject.org/svn/fluid/components/trunk/src/webapp/fluid-components/js/fluid/InlineEdit.js

I hope this helps,

Colin

---
Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto
http://fluidproject.org