On 17 August 2010 16:34, T.J. Crowder <t...@crowdersoftware.com> wrote:
> Hi,
>
> The original code:
>
> $('vsNewUsers').update($('vsNewUsers').innerHTML +
> tmpl_NewUser.evaluate({NewUserID : --i_NewUserID}));
>
> ...will require the browser to spin through the tree inside vsNewUsers
> and create an equivalent HTML string to give you; then tear down that
> tree, parse the HTML you give it back (including re-parsing the stuff
> it just gave you), re-instantiate a lot of elements that look exactly
> the same as the previous one (plus the new ones at the end), re-
> calculate the layout of the previous elements (and then the additional
> ones), etc. (Layout can be expensive with tables, too, so...)
>
> Seems like unnecessary work. :-) Granted the browser's going to do it
> really fast, but still. Also, you'd lose any event handlers you'd
> hooked up to the elements in there and any other data you may have
> stored on them. If your user is using IE, any elements that
> Prototype's already extended will have to be re-extended (which takes
> non-trivial time on big tables).
>
> Fortunately, Element#insert[1] is for exactly this situation:
>
> $('vsNewUsers').insert({
>    bottom: tmpl_NewUser.evaluate({NewUserID : --i_NewUserID})
> });
>
> [1] http://api.prototypejs.org/dom/element/insert/
>
> Vis-a-vis using `new Element` rather than HTML: Parsing HTML and
> showing the result on the page is fundamentally what browsers do, and
> they do it really, _really_ fast. When rendering HTML, they can work
> directly with their internal structures. When you use the DOM API, you
> lose that benefit and have to work through the browser's DOM API ->
> internal structures mapping. And you're doing all of your work in an
> interpreted (or at least compiled-on-the-fly) language.
>
> Net result? Markedly slower -- like an order of magnitude -- to go
> through the DOM API vs. using HTML. This isn't a Prototype thing at
> all, it's just the nature of browsers and what they're optimized for.
> I actually did a test page (not much of one) a little over a year back
> when answering a question for someone that showed this in action, and
> through the wonder that is 'net search:
> http://pastie.org/521342
>
> HTH,
> --
> T.J. Crowder
> Independent Software Consultant
> tj / crowder software / com
> www.crowdersoftware.com
>
> On Aug 17, 2:09 pm, Phil Petree <phil.pet...@gmail.com> wrote:
>> I would think that Creating elements is less limiting...  but I have no idea
>> what most developers do.
>>
>> On Tue, Aug 17, 2010 at 8:29 AM, Richard Quadling <rquadl...@gmail.com>wrote:
>>
>>
>>
>> >  On 17 August 2010 12:59, Phil Petree <phil.pet...@gmail.com> wrote:
>> > > ===========================================================
>> > > HTML save as index.html:
>> > > <html>
>> > > <head>
>> > > <script src="prototype.js"></script>
>> > > </head>
>> > > <body>
>> > > <form id="myform">
>> > > <table id="keytable">
>> > >   <tr><td>Keyword</td><td><input type="text" name="keyword_1"></td></tr>
>> > > </table>
>> > > </form>
>> > > <input type="button" onclick="addkeyword()" value="Add Keyword">
>> > > <input type="button" onclick="dosubmit()" value="Submit">
>> > > <div id="result" style="padding:5px;">
>> > > </div>
>> > > <script>
>> > > var nextkeyid = 2;
>> > > function addkeyword()
>> > > {
>> > >   var elTR = $('keytable').insertRow( -1 );
>> > >   var elTitleTD = elTR.insertCell( -1 );
>> > >   elTitleTD.appendChild( document.createTextNode( 'Keyword' ) );
>> > >   var elInput = document.createElement( 'input' );
>> > >   elInput.type = 'text';
>> > >   elInput.name = 'keyword_'+nextkeyid;
>> > >   nextkeyid++;
>> > >   var elInputTD = elTR.insertCell( -1 );
>> > >   elInputTD.appendChild( elInput );
>> > > }
>> > > function dosubmit( ) {
>> > >   new Ajax.Updater( 'result', 'add.php', { method: 'post', parameters:
>> > > $('myform').serialize() } );
>> > > }
>> > > </script>
>> > > </body>
>> > > </html>
>> > > ===========================================================
>> > > Serverside PHP save as add.php:
>>
>> > > Post Result:<br/>
>> > > <?php var_export( $_POST ) ?>
>> > > ===========================================================
>> > > On Tue, Aug 17, 2010 at 7:30 AM, Richard Quadling <rquadl...@gmail.com>
>> > > wrote:
>>
>> > >> On 17 August 2010 12:01, Phil Petree <phil.pet...@gmail.com> wrote:
>> > >> > That's in the expando example that comes with prototype.js 1.6x
>>
>> > >> > On Tue, Aug 17, 2010 at 6:35 AM, Richard Quadling <
>> > rquadl...@gmail.com>
>> > >> > wrote:
>>
>> > >> >> Hi.
>>
>> > >> >> I've implemented a simple "add new user" button to my "amend users"
>> > >> >> page. The user list is only about 20 people, with
>> > >> >> name/email/pin/contracts/delete options.
>>
>> > >> >> The button calls a template evaluation and that is within an update
>> > ...
>>
>> > >> >> $('vsNewUsers').update($('vsNewUsers').innerHTML +
>> > >> >> tmpl_NewUser.evaluate({NewUserID : --i_NewUserID}));
>>
>> > >> >> All working fine.
>>
>> > >> >> I like how it works, but I wonder how I can just append the result of
>> > >> >> the evaluation.
>>
>> > >> >> How do I take a template and append the results to vsNewUsers.
>> > >> >> vsNewUsers is a tbody element and the template is a <tr> element with
>> > >> >> all the <td>'s needed.
>>
>> > >> >> var tmpl_NewUser = new Template('<tr><td><input type="text"
>> > >> >> name="User[#{NewUserID}][Username]" value="" maxlength="200"
>> > size="50"
>> > >> >> /></td><td><input type="text" name="User[#{NewUserID}][Email]"
>> > >> >> value="" maxlength="200" size="50" /></td><td><input type="number"
>> > >> >> name="User[#{NewUserID}][PIN]" value="" maxlength="4"
>> > >> >> /></td><td><input class="vsaAllContracts" type="checkbox"
>> > >> >> name="User[#{NewUserID}][AllContracts]" value="1"
>> > >> >> id="allContracts_#{NewUserID}" /></td><td><input type="text"
>> > >> >> name="User[#{NewUserID}][ContactIDs]" value="" maxlength="200"
>> > >> >> disabled="disabled" size="50" /><input type="hidden"
>> > >> >> name="User[#{NewUserID}][ContactIDs]" value=""></td><td><button
>> > >> >> class="vsaChooseContracts bold"
>> > >> >> id="selectContracts_#{NewUserID}">Select
>> > >> >> contracts</button></td><td><input type="checkbox"
>> > >> >> name="User[#{NewUserID}][Delete]" value="#{NewUserID}"
>> > /></td></tr>');
>>
>> > >> >> I'm thinking no.
>>
>> > >> >> Regards,
>>
>> > >> >> Richard.
>>
>> > >> >> --
>> > >> >> Richard Quadling.
>>
>> > >> >> --
>> > >> >> You received this message because you are subscribed to the Google
>> > >> >> Groups
>> > >> >> "Prototype & script.aculo.us" group.
>> > >> >> To post to this group, send email to
>> > >> >> prototype-scriptacul...@googlegroups.com.
>> > >> >> To unsubscribe from this group, send email to
>> > >> >> prototype-scriptaculous+unsubscr...@googlegroups.com<prototype-scriptaculou
>> > >> >>  s%2bunsubscr...@googlegroups.com>
>> > .
>> > >> >> For more options, visit this group at
>> > >> >>http://groups.google.com/group/prototype-scriptaculous?hl=en.
>>
>> > >> > --
>> > >> > You received this message because you are subscribed to the Google
>> > >> > Groups
>> > >> > "Prototype & script.aculo.us" group.
>> > >> > To post to this group, send email to
>> > >> > prototype-scriptacul...@googlegroups.com.
>> > >> > To unsubscribe from this group, send email to
>> > >> > prototype-scriptaculous+unsubscr...@googlegroups.com<prototype-scriptaculou
>> > >> >  s%2bunsubscr...@googlegroups.com>
>> > .
>> > >> > For more options, visit this group at
>> > >> >http://groups.google.com/group/prototype-scriptaculous?hl=en.
>>
>> > >> Can you point me to the URL please?
>>
>> > >> --
>> > >> Richard Quadling.
>>
>> > >> --
>> > >> You received this message because you are subscribed to the Google
>> > Groups
>> > >> "Prototype & script.aculo.us" group.
>> > >> To post to this group, send email to
>> > >> prototype-scriptacul...@googlegroups.com.
>> > >> To unsubscribe from this group, send email to
>> > >> prototype-scriptaculous+unsubscr...@googlegroups.com<prototype-scriptaculou
>> > >>  s%2bunsubscr...@googlegroups.com>
>> > .
>> > >> For more options, visit this group at
>> > >>http://groups.google.com/group/prototype-scriptaculous?hl=en.
>>
>> > > --
>> > > You received this message because you are subscribed to the Google Groups
>> > > "Prototype & script.aculo.us" group.
>> > > To post to this group, send email to
>> > > prototype-scriptacul...@googlegroups.com.
>> > > To unsubscribe from this group, send email to
>> > > prototype-scriptaculous+unsubscr...@googlegroups.com<prototype-scriptaculou
>> > >  s%2bunsubscr...@googlegroups.com>
>> > .
>> > > For more options, visit this group at
>> > >http://groups.google.com/group/prototype-scriptaculous?hl=en.
>>
>> > Now in comparison, that process (creating elements, assigning
>> > properties, etc.) _LOOKS_ a lot more effort.
>>
>> > What do most developers do? Templates or createElement?
>>
>> > --
>> >  Richard Quadling.
>>
>> > --
>> > You received this message because you are subscribed to the Google Groups
>> > "Prototype & script.aculo.us" group.
>> > To post to this group, send email to
>> > prototype-scriptacul...@googlegroups.com.
>> > To unsubscribe from this group, send email to
>> > prototype-scriptaculous+unsubscr...@googlegroups.com<prototype-scriptaculou
>> >  s%2bunsubscr...@googlegroups.com>
>> > .
>> > For more options, visit this group at
>> >http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
> --
> You received this message because you are subscribed to the Google Groups 
> "Prototype & script.aculo.us" group.
> To post to this group, send email to prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to 
> prototype-scriptaculous+unsubscr...@googlegroups.com.
> For more options, visit this group at 
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
 And that's why I love Prototype. You guys care, so I don't have to.
Well, other than all the testing and re-working.

Sometimes just getting that pointer is all that is needed.

Thanks T.J.




-- 
Richard Quadling.

-- 
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to