jQuery pattern for DOM building (from strings)?

Noah Botimer botimer at umich.edu
Thu Sep 11 17:59:59 UTC 2008


Antranig,

Awesome.  I will certainly watch this space.  And I hope we can make  
"fossil bolus" the next buzzword on the scale of "unobtrusive" or  
"closure". :-)

Thanks,
-Noah

On Sep 11, 2008, 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 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