jQuery pattern for DOM building (from strings)?

Antranig Basman antranig at caret.cam.ac.uk
Thu Sep 11 17:46:49 UTC 2008


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 time when markup is rendered is the ideal time to insert
data binding primitives and others. Making both rendering
and attachment selector-based can put both on an even footing.

Writing markup in your JS functions has worse implications than
being "unprogrammery" I feel :)

Watch this space,
A.

Noah Botimer wrote:
> 
> Hi Eli,
> 
> Thanks for the thoughts.  I don't have much preference between
> thing.find('...') vs. $('...', thing).  Is there a reason to prefer one?
> 
> Also, I generally try to build the strings then jam it all in, but I
> was trying to accommodate something special here.  I guess the
> question is:  When I'm assembling various chunks that have their own
> encapsulated markup and handlers I don't know about, which is preferred?
> 
>   1. Returning DOM with the handlers/tweaks already in place, or
>   2. Returning strings and some generic find specs/callbacks to be
> attached after the big assembly, or
>   3. Forgetting modular construction and doing a big conditionally
> built string, then a big conditional hookup
> 
> To be specific here, I'm working in Sakai and am building a dialog.
> There are some common elements, but some role-based stuff.  I was
> trying to avoid lots of long, repetitive/overlapping conditions, a la
> classical ASP/PHP/JSP.
> 
> I'm also looking for specific feedback on wrapping up my markup then
> stripping off the wrapper with children().  I have not found a single
> jQuery function that acts as a logical "filter() or find()", so this
> was my workaround.
> 
> Thanks,
> -Noah
> 
> On Sep 10, 2008, at 5:52 PM, eli at media.berkeley.edu wrote:
> 
> > Noah,
> > I think that the pattern you want is this:
> >
> >     // build some HTML into a jquery object
> >     var someDOM = $("<div><span>" +
> >         "This is a div with a click on it." +
> >         "</span></div>");
> >
> >     // bind events to elements, note the (element, container) syntax
> >     $("span", someDOM).click(function(){
> >         alert("foo");
> >     })
> >
> >     // append the new object into the body
> >     $('body').append(someDOM);
> >
> > By the way, I know it seems totally clunky and unprogrammery. But it's
> > often easier and almost always more performant to build HTML as
> > strings
> > and then inject it into the DOM.
> >
> > Did I _get_ the question?
> >
> > - Eli
> >
> >> Hi folks,
> >>
> >> I can't think of a more qualified group to offer insight here.  When
> >> doing some modular DOM building, I hit an interesting jQuery thing.
> >> Specifically, I'm building up small chunks of DOM (from string) and
> >> returning them where they are being dropped in a larger chunk of DOM,
> >> etc.  I'm wondering if I'm what I'm doing is halfway clean, naive, or
> >> ill-advised.
> >>
> >> It's roughly like a decorator pattern.  What I'm running into is
> >> that, when I build up a given DOM chunk, it's at the top level in the
> >> jQuery object.  This forces me to make a decision between find() and
> >> filter() to attach events and so on.  It also makes append() / after
> >> () seem a little flaky.  So, I hacked it...
> >>
> >> My simple hack around this has been to start with something like var
> >> dom = $('<div></div>'); and then doing append()s to that.  I can then
> >> do find() unconditionally, but I end up returning dom.children().
> >> Included p.s. is a contrived example of my technique, with respectful
> >> nods to Steve G.
> >>
> >> Does anyone have any particular opinion about this?  Are the Fluid
> >> components handling this in some super elegant way?
> >>
> >> Also, can someone advise about the warning about escaping slashes in
> >> strings going to DOM/jQuery objects: $('...markup...')? http://
> >> docs.jquery.com/Core/jQuery#jQuery.28.C2.A0html_.29
> >>
> >> Thanks,
> >> -Noah
> >>
> >>
> >> $(document).ready(function() { $('body').append(buildPanel
> >> ('awesome!')); });
> >>
> >> function buildPanel(someParam) {
> >>    var dom = $('<div></div>');
> >>    dom.append('<div class="awesomePanel"></div>');
> >>    dom.find('div.awesomePanel').append(buildTitleBar());
> >>    var awesomeData = {};  //go get some awesome data based on
> >> someParam
> >>    dom.find('div.awesomePanel').append(buildPanelBody(awesomeData));
> >>    return dom.children();
> >> }
> >>
> >> function buildTitleBar() {
> >>    var dom = $('<div></div>');
> >>    dom.append('<div class="awesomeTitle"></div>');
> >>    dom.find('div.awesomeTitle').hover(...);
> >>    return dom.children();
> >> }
> >>
> >> function buildPanelBody(data) {
> >>    var dom = $('<div></div>');
> >>    //make a table of the awesome data
> >>    dom.append('<table class="awesomeTable">...</table>');
> >>    return dom.children();
> >> }
> >>
> >> _______________________________________________
> >> fluid-work mailing list
> >> fluid-work at fluidproject.org
> >> http://fluidproject.org/mailman/listinfo/fluid-work
> >>
> >
> >
> >
> >
> 
> _______________________________________________
> fluid-work mailing list
> fluid-work at fluidproject.org
> http://fluidproject.org/mailman/listinfo/fluid-work



More information about the fluid-work mailing list