jQuery pattern for DOM building (from strings)?

[Noah Botimer]

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
>>
>
>
>
>