Recently I''ve been using prototype''s wonderful new DOM
creation
syntax. But I found that it''s still too verbose. Say I want to
create the following table:
<table id="myTable">
<thead>
<tr>
<th>Title A</th>
<th>Title B</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>
Simple, right? But, as I understand the prototype.js DOM building, to
build this table, I''d have to do:
var table = new Element(''table'', {id:myTable});
var thead = new Element(''thead'');
table.appendChild(thead);
var theadRow = new Element(''tr'');
thead.appendChild(theadRow);
theadRow.appendChild(new Element(''th'').update(''Title
A''));
theadRow.appendChild(new Element(''th'').update(''Title
B''));
var tbody = new Element(''tbody'');
table.appendChild(tbody);
var tbodyRow = new Element(''tr'');
tbody.appendChild(tbodyRow);
tbodyRow.appendChild(new
Element(''td'').update(''A''));
tbodyRow.appendChild(new
Element(''td'').update(''B''));
Grossly verbose, I think you''ll agree. Particularly, it''s the
saving
of the local variables that bothers me.
But what if we had a shortcut function? Just like $() is short for
document.getElementById(), I think we could benefit from a shortcut
element function. So I''ve written one: $E.
var $E = function(tagName, attributes, childrenVarArgs)
{
var element = new Element(tagName, attributes);
$A(arguments).flatten().each(function(child, i)
{
if (i > 1 && child)
element.appendChild(child);
});
return element;
};
It takes the tagName and attributes just like the Element constructor,
but it will also take other arguments that will be appended as
children. Look at the new code to create that same table:
var table = $E(''table'', {id:myTable},
$E(''thead'', null,
$E(''tr'', null,
$E(''th'').update(''Title A''),
$E(''th'').update(''Title B''))),
$E(''tbody'', null,
$E(''tr'', null,
$E(''td'').update(''Title A''),
$E(''td'').update(''Title B''))));
A little nicer, don''t you think? Some intelligent argument parsing
might also be added to get rid of those null attribute parameters.
Anyway, I''m submitting this as a suggestion to be incorporated into
the next release of prototype.js. Let me know what you think.
Cheers,
Erik
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Very nice! Is $E() short for Erik? :) Erik R. wrote:> Recently I''ve been using prototype''s wonderful new DOM creation > syntax. But I found that it''s still too verbose. Say I want to > create the following table: > > <table id="myTable"> > <thead> > <tr> > <th>Title A</th> > <th>Title B</th> > </tr> > </thead> > <tbody> > <tr> > <td>A</td> > <td>B</td> > </tr> > </tbody> > </table> > > Simple, right? But, as I understand the prototype.js DOM building, to > build this table, I''d have to do: > > var table = new Element(''table'', {id:myTable}); > var thead = new Element(''thead''); > table.appendChild(thead); > var theadRow = new Element(''tr''); > thead.appendChild(theadRow); > theadRow.appendChild(new Element(''th'').update(''Title A'')); > theadRow.appendChild(new Element(''th'').update(''Title B'')); > var tbody = new Element(''tbody''); > table.appendChild(tbody); > var tbodyRow = new Element(''tr''); > tbody.appendChild(tbodyRow); > tbodyRow.appendChild(new Element(''td'').update(''A'')); > tbodyRow.appendChild(new Element(''td'').update(''B'')); > > Grossly verbose, I think you''ll agree. Particularly, it''s the saving > of the local variables that bothers me. > > But what if we had a shortcut function? Just like $() is short for > document.getElementById(), I think we could benefit from a shortcut > element function. So I''ve written one: $E. > > var $E = function(tagName, attributes, childrenVarArgs) > { > var element = new Element(tagName, attributes); > $A(arguments).flatten().each(function(child, i) > { > if (i > 1 && child) > element.appendChild(child); > }); > return element; > }; > > It takes the tagName and attributes just like the Element constructor, > but it will also take other arguments that will be appended as > children. Look at the new code to create that same table: > > var table = $E(''table'', {id:myTable}, > $E(''thead'', null, > $E(''tr'', null, > $E(''th'').update(''Title A''), > $E(''th'').update(''Title B''))), > $E(''tbody'', null, > $E(''tr'', null, > $E(''td'').update(''Title A''), > $E(''td'').update(''Title B'')))); > > A little nicer, don''t you think? Some intelligent argument parsing > might also be added to get rid of those null attribute parameters. > > Anyway, I''m submitting this as a suggestion to be incorporated into > the next release of prototype.js. Let me know what you think. > > Cheers, > Erik > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
I was thinking "Element", but now that you mention it, "Erik" makes more sense. :-) On May 6, 11:36 pm, Hector Virgen <djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Very nice! Is $E() short for Erik? :) > > Erik R. wrote: > > Recently I''ve been using prototype''s wonderful new DOM creation > > syntax. But I found that it''s still too verbose. Say I want to > > create the following table: > > > <table id="myTable"> > > <thead> > > <tr> > > <th>Title A</th> > > <th>Title B</th> > > </tr> > > </thead> > > <tbody> > > <tr> > > <td>A</td> > > <td>B</td> > > </tr> > > </tbody> > > </table> > > > Simple, right? But, as I understand the prototype.js DOM building, to > > build this table, I''d have to do: > > > var table = new Element(''table'', {id:myTable}); > > var thead = new Element(''thead''); > > table.appendChild(thead); > > var theadRow = new Element(''tr''); > > thead.appendChild(theadRow); > > theadRow.appendChild(new Element(''th'').update(''Title A'')); > > theadRow.appendChild(new Element(''th'').update(''Title B'')); > > var tbody = new Element(''tbody''); > > table.appendChild(tbody); > > var tbodyRow = new Element(''tr''); > > tbody.appendChild(tbodyRow); > > tbodyRow.appendChild(new Element(''td'').update(''A'')); > > tbodyRow.appendChild(new Element(''td'').update(''B'')); > > > Grossly verbose, I think you''ll agree. Particularly, it''s the saving > > of the local variables that bothers me. > > > But what if we had a shortcut function? Just like $() is short for > > document.getElementById(), I think we could benefit from a shortcut > > element function. So I''ve written one: $E. > > > var $E = function(tagName, attributes, childrenVarArgs) > > { > > var element = new Element(tagName, attributes); > > $A(arguments).flatten().each(function(child, i) > > { > > if (i > 1 && child) > > element.appendChild(child); > > }); > > return element; > > }; > > > It takes the tagName and attributes just like the Element constructor, > > but it will also take other arguments that will be appended as > > children. Look at the new code to create that same table: > > > var table = $E(''table'', {id:myTable}, > > $E(''thead'', null, > > $E(''tr'', null, > > $E(''th'').update(''Title A''), > > $E(''th'').update(''Title B''))), > > $E(''tbody'', null, > > $E(''tr'', null, > > $E(''td'').update(''Title A''), > > $E(''td'').update(''Title B'')))); > > > A little nicer, don''t you think? Some intelligent argument parsing > > might also be added to get rid of those null attribute parameters. > > > Anyway, I''m submitting this as a suggestion to be incorporated into > > the next release of prototype.js. Let me know what you think. > > > Cheers, > > Erik--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
So for every single one of those cells (that $E is called) there is a "new Element" instantiation and 2 enumerable methods (that are being called recursively) : ) Why not just use string interpolation? - kangax On May 6, 5:43 pm, "Erik R." <rasmussene...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I was thinking "Element", but now that you mention it, "Erik" makes > more sense. :-) > > On May 6, 11:36 pm, Hector Virgen <djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Very nice! Is $E() short for Erik? :) > > > Erik R. wrote: > > > Recently I''ve been using prototype''s wonderful new DOM creation > > > syntax. But I found that it''s still too verbose. Say I want to > > > create the following table: > > > > <table id="myTable"> > > > <thead> > > > <tr> > > > <th>Title A</th> > > > <th>Title B</th> > > > </tr> > > > </thead> > > > <tbody> > > > <tr> > > > <td>A</td> > > > <td>B</td> > > > </tr> > > > </tbody> > > > </table> > > > > Simple, right? But, as I understand the prototype.js DOM building, to > > > build this table, I''d have to do: > > > > var table = new Element(''table'', {id:myTable}); > > > var thead = new Element(''thead''); > > > table.appendChild(thead); > > > var theadRow = new Element(''tr''); > > > thead.appendChild(theadRow); > > > theadRow.appendChild(new Element(''th'').update(''Title A'')); > > > theadRow.appendChild(new Element(''th'').update(''Title B'')); > > > var tbody = new Element(''tbody''); > > > table.appendChild(tbody); > > > var tbodyRow = new Element(''tr''); > > > tbody.appendChild(tbodyRow); > > > tbodyRow.appendChild(new Element(''td'').update(''A'')); > > > tbodyRow.appendChild(new Element(''td'').update(''B'')); > > > > Grossly verbose, I think you''ll agree. Particularly, it''s the saving > > > of the local variables that bothers me. > > > > But what if we had a shortcut function? Just like $() is short for > > > document.getElementById(), I think we could benefit from a shortcut > > > element function. So I''ve written one: $E. > > > > var $E = function(tagName, attributes, childrenVarArgs) > > > { > > > var element = new Element(tagName, attributes); > > > $A(arguments).flatten().each(function(child, i) > > > { > > > if (i > 1 && child) > > > element.appendChild(child); > > > }); > > > return element; > > > }; > > > > It takes the tagName and attributes just like the Element constructor, > > > but it will also take other arguments that will be appended as > > > children. Look at the new code to create that same table: > > > > var table = $E(''table'', {id:myTable}, > > > $E(''thead'', null, > > > $E(''tr'', null, > > > $E(''th'').update(''Title A''), > > > $E(''th'').update(''Title B''))), > > > $E(''tbody'', null, > > > $E(''tr'', null, > > > $E(''td'').update(''Title A''), > > > $E(''td'').update(''Title B'')))); > > > > A little nicer, don''t you think? Some intelligent argument parsing > > > might also be added to get rid of those null attribute parameters. > > > > Anyway, I''m submitting this as a suggestion to be incorporated into > > > the next release of prototype.js. Let me know what you think. > > > > Cheers, > > > Erik--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Maybe this can be optimized a little bit? I''m not sure if this helps,
but it doesn''t use any anonymous functions.
var $E = function(tagName, attributes, childrenVarArgs)
{
var element = new Element(tagName, attributes);
if (arguments.length < 3) return element;
var args = $(arguments).flatten();
var size = args.size();
for (var i = 1; i <= size; i++) {
element.appendChild(args.indexOf(i));
}
return element;
};
kangax wrote:> So for every single one of those cells (that $E is called) there is a
> "new Element" instantiation and 2 enumerable methods (that are
being
> called recursively) : )
> Why not just use string interpolation?
>
> - kangax
>
>
> On May 6, 5:43 pm, "Erik R."
<rasmussene...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
>> I was thinking "Element", but now that you mention it,
"Erik" makes
>> more sense. :-)
>>
>> On May 6, 11:36 pm, Hector Virgen
<djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>>
>>
>>> Very nice! Is $E() short for Erik? :)
>>>
>>> Erik R. wrote:
>>>
>>>> Recently I''ve been using prototype''s
wonderful new DOM creation
>>>> syntax. But I found that it''s still too verbose. Say
I want to
>>>> create the following table:
>>>>
>>>> <table id="myTable">
>>>> <thead>
>>>> <tr>
>>>> <th>Title A</th>
>>>> <th>Title B</th>
>>>> </tr>
>>>> </thead>
>>>> <tbody>
>>>> <tr>
>>>> <td>A</td>
>>>> <td>B</td>
>>>> </tr>
>>>> </tbody>
>>>> </table>
>>>>
>>>> Simple, right? But, as I understand the prototype.js DOM
building, to
>>>> build this table, I''d have to do:
>>>>
>>>> var table = new Element(''table'',
{id:myTable});
>>>> var thead = new Element(''thead'');
>>>> table.appendChild(thead);
>>>> var theadRow = new Element(''tr'');
>>>> thead.appendChild(theadRow);
>>>> theadRow.appendChild(new
Element(''th'').update(''Title A''));
>>>> theadRow.appendChild(new
Element(''th'').update(''Title B''));
>>>> var tbody = new Element(''tbody'');
>>>> table.appendChild(tbody);
>>>> var tbodyRow = new Element(''tr'');
>>>> tbody.appendChild(tbodyRow);
>>>> tbodyRow.appendChild(new
Element(''td'').update(''A''));
>>>> tbodyRow.appendChild(new
Element(''td'').update(''B''));
>>>>
>>>> Grossly verbose, I think you''ll agree. Particularly,
it''s the saving
>>>> of the local variables that bothers me.
>>>>
>>>> But what if we had a shortcut function? Just like $() is short
for
>>>> document.getElementById(), I think we could benefit from a
shortcut
>>>> element function. So I''ve written one: $E.
>>>>
>>>> var $E = function(tagName, attributes, childrenVarArgs)
>>>> {
>>>> var element = new Element(tagName, attributes);
>>>> $A(arguments).flatten().each(function(child, i)
>>>> {
>>>> if (i > 1 && child)
>>>> element.appendChild(child);
>>>> });
>>>> return element;
>>>> };
>>>>
>>>> It takes the tagName and attributes just like the Element
constructor,
>>>> but it will also take other arguments that will be appended as
>>>> children. Look at the new code to create that same table:
>>>>
>>>> var table = $E(''table'', {id:myTable},
>>>> $E(''thead'', null,
>>>> $E(''tr'', null,
>>>> $E(''th'').update(''Title
A''),
>>>> $E(''th'').update(''Title
B''))),
>>>> $E(''tbody'', null,
>>>> $E(''tr'', null,
>>>> $E(''td'').update(''Title
A''),
>>>> $E(''td'').update(''Title
B''))));
>>>>
>>>> A little nicer, don''t you think? Some intelligent
argument parsing
>>>> might also be added to get rid of those null attribute
parameters.
>>>>
>>>> Anyway, I''m submitting this as a suggestion to be
incorporated into
>>>> the next release of prototype.js. Let me know what you think.
>>>>
>>>> Cheers,
>>>> Erik
>>>>
> >
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Sure. An old-school for loop is probably more efficient. But most of the Enumerable methods already use each() with an anonymous function anyway, so presumably they could be further optimized as well. I was just sticking with the prototype.js style. On May 7, 12:43 am, Hector Virgen <djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Maybe this can be optimized a little bit? I''m not sure if this helps, > but it doesn''t use any anonymous functions. > > var $E = function(tagName, attributes, childrenVarArgs) > { > var element = new Element(tagName, attributes); > if (arguments.length < 3) return element; > var args = $(arguments).flatten(); > var size = args.size(); > for (var i = 1; i <= size; i++) { > element.appendChild(args.indexOf(i)); > } > return element; > > }; > kangax wrote: > > So for every single one of those cells (that $E is called) there is a > > "new Element" instantiation and 2 enumerable methods (that are being > > called recursively) : ) > > Why not just use string interpolation? > > > - kangax > > > On May 6, 5:43 pm, "Erik R." <rasmussene...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > >> I was thinking "Element", but now that you mention it, "Erik" makes > >> more sense. :-) > > >> On May 6, 11:36 pm, Hector Virgen <djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > >>> Very nice! Is $E() short for Erik? :) > > >>> Erik R. wrote: > > >>>> Recently I''ve been using prototype''s wonderful new DOM creation > >>>> syntax. But I found that it''s still too verbose. Say I want to > >>>> create the following table: > > >>>> <table id="myTable"> > >>>> <thead> > >>>> <tr> > >>>> <th>Title A</th> > >>>> <th>Title B</th> > >>>> </tr> > >>>> </thead> > >>>> <tbody> > >>>> <tr> > >>>> <td>A</td> > >>>> <td>B</td> > >>>> </tr> > >>>> </tbody> > >>>> </table> > > >>>> Simple, right? But, as I understand the prototype.js DOM building, to > >>>> build this table, I''d have to do: > > >>>> var table = new Element(''table'', {id:myTable}); > >>>> var thead = new Element(''thead''); > >>>> table.appendChild(thead); > >>>> var theadRow = new Element(''tr''); > >>>> thead.appendChild(theadRow); > >>>> theadRow.appendChild(new Element(''th'').update(''Title A'')); > >>>> theadRow.appendChild(new Element(''th'').update(''Title B'')); > >>>> var tbody = new Element(''tbody''); > >>>> table.appendChild(tbody); > >>>> var tbodyRow = new Element(''tr''); > >>>> tbody.appendChild(tbodyRow); > >>>> tbodyRow.appendChild(new Element(''td'').update(''A'')); > >>>> tbodyRow.appendChild(new Element(''td'').update(''B'')); > > >>>> Grossly verbose, I think you''ll agree. Particularly, it''s the saving > >>>> of the local variables that bothers me. > > >>>> But what if we had a shortcut function? Just like $() is short for > >>>> document.getElementById(), I think we could benefit from a shortcut > >>>> element function. So I''ve written one: $E. > > >>>> var $E = function(tagName, attributes, childrenVarArgs) > >>>> { > >>>> var element = new Element(tagName, attributes); > >>>> $A(arguments).flatten().each(function(child, i) > >>>> { > >>>> if (i > 1 && child) > >>>> element.appendChild(child); > >>>> }); > >>>> return element; > >>>> }; > > >>>> It takes the tagName and attributes just like the Element constructor, > >>>> but it will also take other arguments that will be appended as > >>>> children. Look at the new code to create that same table: > > >>>> var table = $E(''table'', {id:myTable}, > >>>> $E(''thead'', null, > >>>> $E(''tr'', null, > >>>> $E(''th'').update(''Title A''), > >>>> $E(''th'').update(''Title B''))), > >>>> $E(''tbody'', null, > >>>> $E(''tr'', null, > >>>> $E(''td'').update(''Title A''), > >>>> $E(''td'').update(''Title B'')))); > > >>>> A little nicer, don''t you think? Some intelligent argument parsing > >>>> might also be added to get rid of those null attribute parameters. > > >>>> Anyway, I''m submitting this as a suggestion to be incorporated into > >>>> the next release of prototype.js. Let me know what you think. > > >>>> Cheers, > >>>> Erik--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
In theory (at least), couldn''t it be simplified to something like:
var $E = function (/** tag, attr, child0, ..., childN **/) {
var args = $A(arguments);
var element = new Element(args.shift(), args.shift());
args.each(element.appendChild.bind(element));
return element;
};
No idea whether it helps with performance.
But, at minimal, it removes the anonymous function.
- Jon L.
On Tue, May 6, 2008 at 6:03 PM, Erik R.
<rasmussenerik-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> Sure. An old-school for loop is probably more efficient. But most of
> the Enumerable methods already use each() with an anonymous function
> anyway, so presumably they could be further optimized as well. I was
> just sticking with the prototype.js style.
>
> On May 7, 12:43 am, Hector Virgen
<djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > Maybe this can be optimized a little bit? I''m not sure if
this helps,
> > but it doesn''t use any anonymous functions.
> >
> > var $E = function(tagName, attributes, childrenVarArgs)
> > {
> > var element = new Element(tagName, attributes);
> > if (arguments.length < 3) return element;
> > var args = $(arguments).flatten();
> > var size = args.size();
> > for (var i = 1; i <= size; i++) {
> > element.appendChild(args.indexOf(i));
> > }
> > return element;
> >
> > };
> > kangax wrote:
> > > So for every single one of those cells (that $E is called) there
is a
> > > "new Element" instantiation and 2 enumerable methods
(that are being
> > > called recursively) : )
> > > Why not just use string interpolation?
> >
> > > - kangax
> >
> > > On May 6, 5:43 pm, "Erik R."
<rasmussene...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> >
> > >> I was thinking "Element", but now that you mention
it, "Erik" makes
> > >> more sense. :-)
> >
> > >> On May 6, 11:36 pm, Hector Virgen
<djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> >
> > >>> Very nice! Is $E() short for Erik? :)
> >
> > >>> Erik R. wrote:
> >
> > >>>> Recently I''ve been using
prototype''s wonderful new DOM creation
> > >>>> syntax. But I found that it''s still too
verbose. Say I want to
> > >>>> create the following table:
> >
> > >>>> <table id="myTable">
> > >>>> <thead>
> > >>>> <tr>
> > >>>> <th>Title A</th>
> > >>>> <th>Title B</th>
> > >>>> </tr>
> > >>>> </thead>
> > >>>> <tbody>
> > >>>> <tr>
> > >>>> <td>A</td>
> > >>>> <td>B</td>
> > >>>> </tr>
> > >>>> </tbody>
> > >>>> </table>
> >
> > >>>> Simple, right? But, as I understand the prototype.js
DOM building,
> to
> > >>>> build this table, I''d have to do:
> >
> > >>>> var table = new Element(''table'',
{id:myTable});
> > >>>> var thead = new Element(''thead'');
> > >>>> table.appendChild(thead);
> > >>>> var theadRow = new Element(''tr'');
> > >>>> thead.appendChild(theadRow);
> > >>>> theadRow.appendChild(new
Element(''th'').update(''Title A''));
> > >>>> theadRow.appendChild(new
Element(''th'').update(''Title B''));
> > >>>> var tbody = new Element(''tbody'');
> > >>>> table.appendChild(tbody);
> > >>>> var tbodyRow = new Element(''tr'');
> > >>>> tbody.appendChild(tbodyRow);
> > >>>> tbodyRow.appendChild(new
Element(''td'').update(''A''));
> > >>>> tbodyRow.appendChild(new
Element(''td'').update(''B''));
> >
> > >>>> Grossly verbose, I think you''ll agree.
Particularly, it''s the
> saving
> > >>>> of the local variables that bothers me.
> >
> > >>>> But what if we had a shortcut function? Just like
$() is short for
> > >>>> document.getElementById(), I think we could benefit
from a shortcut
> > >>>> element function. So I''ve written one: $E.
> >
> > >>>> var $E = function(tagName, attributes,
childrenVarArgs)
> > >>>> {
> > >>>> var element = new Element(tagName, attributes);
> > >>>> $A(arguments).flatten().each(function(child, i)
> > >>>> {
> > >>>> if (i > 1 && child)
> > >>>> element.appendChild(child);
> > >>>> });
> > >>>> return element;
> > >>>> };
> >
> > >>>> It takes the tagName and attributes just like the
Element
> constructor,
> > >>>> but it will also take other arguments that will be
appended as
> > >>>> children. Look at the new code to create that same
table:
> >
> > >>>> var table = $E(''table'',
{id:myTable},
> > >>>> $E(''thead'', null,
> > >>>> $E(''tr'', null,
> > >>>>
$E(''th'').update(''Title A''),
> > >>>>
$E(''th'').update(''Title B''))),
> > >>>> $E(''tbody'', null,
> > >>>> $E(''tr'', null,
> > >>>>
$E(''td'').update(''Title A''),
> > >>>>
$E(''td'').update(''Title B''))));
> >
> > >>>> A little nicer, don''t you think? Some
intelligent argument parsing
> > >>>> might also be added to get rid of those null
attribute parameters.
> >
> > >>>> Anyway, I''m submitting this as a suggestion
to be incorporated into
> > >>>> the next release of prototype.js. Let me know what
you think.
> >
> > >>>> Cheers,
> > >>>> Erik
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Very cool! A quick test took 5 seconds to build 500 tables with 4 cells each. I guess that''s reasonable, but could be better. Jon L. wrote:> In theory (at least), couldn''t it be simplified to something like: > > var $E = function (/** tag, attr, child0, ..., childN **/) { > var args = $A(arguments); > var element = new Element(args.shift(), args.shift()); > args.each(element.appendChild.bind(element)); > return element; > }; > > No idea whether it helps with performance. > But, at minimal, it removes the anonymous function. > > - Jon L. > > On Tue, May 6, 2008 at 6:03 PM, Erik R. <rasmussenerik-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org > <mailto:rasmussenerik-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>> wrote: > > > Sure. An old-school for loop is probably more efficient. But most of > the Enumerable methods already use each() with an anonymous function > anyway, so presumably they could be further optimized as well. I was > just sticking with the prototype.js style. > > On May 7, 12:43 am, Hector Virgen <djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org > <mailto:djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>> wrote: > > Maybe this can be optimized a little bit? I''m not sure if this > helps, > > but it doesn''t use any anonymous functions. > > > > var $E = function(tagName, attributes, childrenVarArgs) > > { > > var element = new Element(tagName, attributes); > > if (arguments.length < 3) return element; > > var args = $(arguments).flatten(); > > var size = args.size(); > > for (var i = 1; i <= size; i++) { > > element.appendChild(args.indexOf(i)); > > } > > return element; > > > > }; > > kangax wrote: > > > So for every single one of those cells (that $E is called) > there is a > > > "new Element" instantiation and 2 enumerable methods (that are > being > > > called recursively) : ) > > > Why not just use string interpolation? > > > > > - kangax > > > > > On May 6, 5:43 pm, "Erik R." <rasmussene...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org > <mailto:rasmussene...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>> wrote: > > > > >> I was thinking "Element", but now that you mention it, "Erik" > makes > > >> more sense. :-) > > > > >> On May 6, 11:36 pm, Hector Virgen <djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org > <mailto:djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>> wrote: > > > > >>> Very nice! Is $E() short for Erik? :) > > > > >>> Erik R. wrote: > > > > >>>> Recently I''ve been using prototype''s wonderful new DOM creation > > >>>> syntax. But I found that it''s still too verbose. Say I > want to > > >>>> create the following table: > > > > >>>> <table id="myTable"> > > >>>> <thead> > > >>>> <tr> > > >>>> <th>Title A</th> > > >>>> <th>Title B</th> > > >>>> </tr> > > >>>> </thead> > > >>>> <tbody> > > >>>> <tr> > > >>>> <td>A</td> > > >>>> <td>B</td> > > >>>> </tr> > > >>>> </tbody> > > >>>> </table> > > > > >>>> Simple, right? But, as I understand the prototype.js DOM > building, to > > >>>> build this table, I''d have to do: > > > > >>>> var table = new Element(''table'', {id:myTable}); > > >>>> var thead = new Element(''thead''); > > >>>> table.appendChild(thead); > > >>>> var theadRow = new Element(''tr''); > > >>>> thead.appendChild(theadRow); > > >>>> theadRow.appendChild(new Element(''th'').update(''Title A'')); > > >>>> theadRow.appendChild(new Element(''th'').update(''Title B'')); > > >>>> var tbody = new Element(''tbody''); > > >>>> table.appendChild(tbody); > > >>>> var tbodyRow = new Element(''tr''); > > >>>> tbody.appendChild(tbodyRow); > > >>>> tbodyRow.appendChild(new Element(''td'').update(''A'')); > > >>>> tbodyRow.appendChild(new Element(''td'').update(''B'')); > > > > >>>> Grossly verbose, I think you''ll agree. Particularly, it''s > the saving > > >>>> of the local variables that bothers me. > > > > >>>> But what if we had a shortcut function? Just like $() is > short for > > >>>> document.getElementById(), I think we could benefit from a > shortcut > > >>>> element function. So I''ve written one: $E. > > > > >>>> var $E = function(tagName, attributes, childrenVarArgs) > > >>>> { > > >>>> var element = new Element(tagName, attributes); > > >>>> $A(arguments).flatten().each(function(child, i) > > >>>> { > > >>>> if (i > 1 && child) > > >>>> element.appendChild(child); > > >>>> }); > > >>>> return element; > > >>>> }; > > > > >>>> It takes the tagName and attributes just like the Element > constructor, > > >>>> but it will also take other arguments that will be appended as > > >>>> children. Look at the new code to create that same table: > > > > >>>> var table = $E(''table'', {id:myTable}, > > >>>> $E(''thead'', null, > > >>>> $E(''tr'', null, > > >>>> $E(''th'').update(''Title A''), > > >>>> $E(''th'').update(''Title B''))), > > >>>> $E(''tbody'', null, > > >>>> $E(''tr'', null, > > >>>> $E(''td'').update(''Title A''), > > >>>> $E(''td'').update(''Title B'')))); > > > > >>>> A little nicer, don''t you think? Some intelligent argument > parsing > > >>>> might also be added to get rid of those null attribute > parameters. > > > > >>>> Anyway, I''m submitting this as a suggestion to be > incorporated into > > >>>> the next release of prototype.js. Let me know what you think. > > > > >>>> Cheers, > > >>>> Erik > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Erik,
It''s not really about anonymous function, but rather such frequent
(for every element) invocation of a method which is quite "heavy".
This could of course be useful when plain string insertion is not the
best solution (though I don''t see why it would be so).
I am sometimes using "makeElement" helper - its performance is a
constant (i.e. it does not depend on the size of an element being
created):
String.prototype.makeElement = function() {
var element = Element(''div'');
element.innerHTML = this;
return element.down();
}
...
var table =
''<table><tr><td>...</td></tr></table>''.makeElement();
As a side note, appendChild is buggy with certain elements. #insert on
the other hand smoothes all these quirks.
Best,
kangax
On May 6, 7:03 pm, "Erik R."
<rasmussene...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Sure. An old-school for loop is probably more efficient. But most of
> the Enumerable methods already use each() with an anonymous function
> anyway, so presumably they could be further optimized as well. I was
> just sticking with the prototype.js style.
>
> On May 7, 12:43 am, Hector Virgen
<djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Maybe this can be optimized a little bit? I''m not sure if
this helps,
> > but it doesn''t use any anonymous functions.
>
> > var $E = function(tagName, attributes, childrenVarArgs)
> > {
> > var element = new Element(tagName, attributes);
> > if (arguments.length < 3) return element;
> > var args = $(arguments).flatten();
> > var size = args.size();
> > for (var i = 1; i <= size; i++) {
> > element.appendChild(args.indexOf(i));
> > }
> > return element;
>
> > };
> > kangax wrote:
> > > So for every single one of those cells (that $E is called) there
is a
> > > "new Element" instantiation and 2 enumerable methods
(that are being
> > > called recursively) : )
> > > Why not just use string interpolation?
>
> > > - kangax
>
> > > On May 6, 5:43 pm, "Erik R."
<rasmussene...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > >> I was thinking "Element", but now that you mention
it, "Erik" makes
> > >> more sense. :-)
>
> > >> On May 6, 11:36 pm, Hector Virgen
<djvir...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > >>> Very nice! Is $E() short for Erik? :)
>
> > >>> Erik R. wrote:
>
> > >>>> Recently I''ve been using
prototype''s wonderful new DOM creation
> > >>>> syntax. But I found that it''s still too
verbose. Say I want to
> > >>>> create the following table:
>
> > >>>> <table id="myTable">
> > >>>> <thead>
> > >>>> <tr>
> > >>>> <th>Title A</th>
> > >>>> <th>Title B</th>
> > >>>> </tr>
> > >>>> </thead>
> > >>>> <tbody>
> > >>>> <tr>
> > >>>> <td>A</td>
> > >>>> <td>B</td>
> > >>>> </tr>
> > >>>> </tbody>
> > >>>> </table>
>
> > >>>> Simple, right? But, as I understand the prototype.js
DOM building, to
> > >>>> build this table, I''d have to do:
>
> > >>>> var table = new Element(''table'',
{id:myTable});
> > >>>> var thead = new Element(''thead'');
> > >>>> table.appendChild(thead);
> > >>>> var theadRow = new Element(''tr'');
> > >>>> thead.appendChild(theadRow);
> > >>>> theadRow.appendChild(new
Element(''th'').update(''Title A''));
> > >>>> theadRow.appendChild(new
Element(''th'').update(''Title B''));
> > >>>> var tbody = new Element(''tbody'');
> > >>>> table.appendChild(tbody);
> > >>>> var tbodyRow = new Element(''tr'');
> > >>>> tbody.appendChild(tbodyRow);
> > >>>> tbodyRow.appendChild(new
Element(''td'').update(''A''));
> > >>>> tbodyRow.appendChild(new
Element(''td'').update(''B''));
>
> > >>>> Grossly verbose, I think you''ll agree.
Particularly, it''s the saving
> > >>>> of the local variables that bothers me.
>
> > >>>> But what if we had a shortcut function? Just like
$() is short for
> > >>>> document.getElementById(), I think we could benefit
from a shortcut
> > >>>> element function. So I''ve written one: $E.
>
> > >>>> var $E = function(tagName, attributes,
childrenVarArgs)
> > >>>> {
> > >>>> var element = new Element(tagName, attributes);
> > >>>> $A(arguments).flatten().each(function(child, i)
> > >>>> {
> > >>>> if (i > 1 && child)
> > >>>> element.appendChild(child);
> > >>>> });
> > >>>> return element;
> > >>>> };
>
> > >>>> It takes the tagName and attributes just like the
Element constructor,
> > >>>> but it will also take other arguments that will be
appended as
> > >>>> children. Look at the new code to create that same
table:
>
> > >>>> var table = $E(''table'',
{id:myTable},
> > >>>> $E(''thead'', null,
> > >>>> $E(''tr'', null,
> > >>>>
$E(''th'').update(''Title A''),
> > >>>>
$E(''th'').update(''Title B''))),
> > >>>> $E(''tbody'', null,
> > >>>> $E(''tr'', null,
> > >>>>
$E(''td'').update(''Title A''),
> > >>>>
$E(''td'').update(''Title B''))));
>
> > >>>> A little nicer, don''t you think? Some
intelligent argument parsing
> > >>>> might also be added to get rid of those null
attribute parameters.
>
> > >>>> Anyway, I''m submitting this as a suggestion
to be incorporated into
> > >>>> the next release of prototype.js. Let me know what
you think.
>
> > >>>> Cheers,
> > >>>> Erik
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
I really like what Dan Webb has done in LowPro (http://www.danwebb.net/
lowpro) for making DOM building easier. His site isn''t responding just
at the moment so I can''t grab his exact code, but since I still prefer
scripty''s Builder.node() I have this in my extensions that achieves
the same result:
("p|div|span|strong|em|img|table|tr|td|th|thead|tbody|tfoot|pre|
code|" +
"h1|h2|h3|h4|h5|h6|ul|ol|li|form|input|textarea|legend|fieldset|"
+
"select|option|blockquote|cite|br|hr|dd|dl|dt|address|a|button|abbr|
acronym|" +
"script|link|style|bdo|ins|del|object|param|col|colgroup|optgroup|
caption|" +
"label|dfn|kbd|samp|var").split("|").each(
function(el) {
window[''$'' + el] = function() {
return Element.extend(Builder.node.apply(Builder,
[el].concat(Array.prototype.slice.apply(arguments))));
};
});
And you end up with a $-prefixed function for each different type of
element, so you could do your above table something like this:
var table = $table({ id: ''myTable'' }, {
$thead({
$tr({ $th(''Title A''), $th(''Title B'') })
}),
$tbody({
$tr({ $td(''Cell A''), $td(''Cell B'') })
})
});
Which I reckon makes it pretty readable. And with Builder.node()''s
flexibility with arguments you end up with a pretty powerful DOM
builder that requires a small amount of code and is easy to maintain.
That is of course if you''re comfortable cluttering up the global
namespace with all these extra functions.
(btw, if you''re going to use the above then you need to make sure it
is executed only after scripty''s builder.js is loaded, so if
you''re
loading it the normal way you might need to do it after a dom:loaded
event).
-- Rod
On May 7, 7:27 am, "Erik R."
<rasmussene...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Recently I''ve been using prototype''s wonderful new DOM
creation
> syntax. But I found that it''s still too verbose. Say I want to
> create the following table:
>
> <table id="myTable">
> <thead>
> <tr>
> <th>Title A</th>
> <th>Title B</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td>A</td>
> <td>B</td>
> </tr>
> </tbody>
> </table>
>
> Simple, right? But, as I understand the prototype.js DOM building, to
> build this table, I''d have to do:
>
> var table = new Element(''table'', {id:myTable});
> var thead = new Element(''thead'');
> table.appendChild(thead);
> var theadRow = new Element(''tr'');
> thead.appendChild(theadRow);
> theadRow.appendChild(new
Element(''th'').update(''Title A''));
> theadRow.appendChild(new
Element(''th'').update(''Title B''));
> var tbody = new Element(''tbody'');
> table.appendChild(tbody);
> var tbodyRow = new Element(''tr'');
> tbody.appendChild(tbodyRow);
> tbodyRow.appendChild(new
Element(''td'').update(''A''));
> tbodyRow.appendChild(new
Element(''td'').update(''B''));
>
> Grossly verbose, I think you''ll agree. Particularly,
it''s the saving
> of the local variables that bothers me.
>
> But what if we had a shortcut function? Just like $() is short for
> document.getElementById(), I think we could benefit from a shortcut
> element function. So I''ve written one: $E.
>
> var $E = function(tagName, attributes, childrenVarArgs)
> {
> var element = new Element(tagName, attributes);
> $A(arguments).flatten().each(function(child, i)
> {
> if (i > 1 && child)
> element.appendChild(child);
> });
> return element;
>
> };
>
> It takes the tagName and attributes just like the Element constructor,
> but it will also take other arguments that will be appended as
> children. Look at the new code to create that same table:
>
> var table = $E(''table'', {id:myTable},
> $E(''thead'', null,
> $E(''tr'', null,
> $E(''th'').update(''Title A''),
> $E(''th'').update(''Title B''))),
> $E(''tbody'', null,
> $E(''tr'', null,
> $E(''td'').update(''Title A''),
> $E(''td'').update(''Title B''))));
>
> A little nicer, don''t you think? Some intelligent argument
parsing
> might also be added to get rid of those null attribute parameters.
>
> Anyway, I''m submitting this as a suggestion to be incorporated
into
> the next release of prototype.js. Let me know what you think.
>
> Cheers,
> Erik
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Nice one, Rod. That code is LISPtastic! On May 7, 2:53 am, Rod <r...-1O4OMqRgiKA@public.gmane.org> wrote:> I really like what Dan Webb has done in LowPro (http://www.danwebb.net/ > lowpro) for making DOM building easier. His site isn''t responding just > at the moment so I can''t grab his exact code, but since I still prefer > scripty''s Builder.node() I have this in my extensions that achieves > the same result: > > ("p|div|span|strong|em|img|table|tr|td|th|thead|tbody|tfoot|pre| > code|" + > "h1|h2|h3|h4|h5|h6|ul|ol|li|form|input|textarea|legend|fieldset|" > + > "select|option|blockquote|cite|br|hr|dd|dl|dt|address|a|button|abbr| > acronym|" + > "script|link|style|bdo|ins|del|object|param|col|colgroup|optgroup| > caption|" + > "label|dfn|kbd|samp|var").split("|").each( > function(el) { > window[''$'' + el] = function() { > return Element.extend(Builder.node.apply(Builder, > [el].concat(Array.prototype.slice.apply(arguments)))); > }; > }); > > And you end up with a $-prefixed function for each different type of > element, so you could do your above table something like this: > > var table = $table({ id: ''myTable'' }, { > $thead({ > $tr({ $th(''Title A''), $th(''Title B'') }) > }), > $tbody({ > $tr({ $td(''Cell A''), $td(''Cell B'') }) > }) > > }); > > Which I reckon makes it pretty readable. And with Builder.node()''s > flexibility with arguments you end up with a pretty powerful DOM > builder that requires a small amount of code and is easy to maintain. > That is of course if you''re comfortable cluttering up the global > namespace with all these extra functions. > > (btw, if you''re going to use the above then you need to make sure it > is executed only after scripty''s builder.js is loaded, so if you''re > loading it the normal way you might need to do it after a dom:loaded > event). > -- Rod > > On May 7, 7:27 am, "Erik R." <rasmussene...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Recently I''ve been using prototype''s wonderful new DOM creation > > syntax. But I found that it''s still too verbose. Say I want to > > create the following table: > > > <table id="myTable"> > > <thead> > > <tr> > > <th>Title A</th> > > <th>Title B</th> > > </tr> > > </thead> > > <tbody> > > <tr> > > <td>A</td> > > <td>B</td> > > </tr> > > </tbody> > > </table> > > > Simple, right? But, as I understand the prototype.js DOM building, to > > build this table, I''d have to do: > > > var table = new Element(''table'', {id:myTable}); > > var thead = new Element(''thead''); > > table.appendChild(thead); > > var theadRow = new Element(''tr''); > > thead.appendChild(theadRow); > > theadRow.appendChild(new Element(''th'').update(''Title A'')); > > theadRow.appendChild(new Element(''th'').update(''Title B'')); > > var tbody = new Element(''tbody''); > > table.appendChild(tbody); > > var tbodyRow = new Element(''tr''); > > tbody.appendChild(tbodyRow); > > tbodyRow.appendChild(new Element(''td'').update(''A'')); > > tbodyRow.appendChild(new Element(''td'').update(''B'')); > > > Grossly verbose, I think you''ll agree. Particularly, it''s the saving > > of the local variables that bothers me. > > > But what if we had a shortcut function? Just like $() is short for > > document.getElementById(), I think we could benefit from a shortcut > > element function. So I''ve written one: $E. > > > var $E = function(tagName, attributes, childrenVarArgs) > > { > > var element = new Element(tagName, attributes); > > $A(arguments).flatten().each(function(child, i) > > { > > if (i > 1 && child) > > element.appendChild(child); > > }); > > return element; > > > }; > > > It takes the tagName and attributes just like the Element constructor, > > but it will also take other arguments that will be appended as > > children. Look at the new code to create that same table: > > > var table = $E(''table'', {id:myTable}, > > $E(''thead'', null, > > $E(''tr'', null, > > $E(''th'').update(''Title A''), > > $E(''th'').update(''Title B''))), > > $E(''tbody'', null, > > $E(''tr'', null, > > $E(''td'').update(''Title A''), > > $E(''td'').update(''Title B'')))); > > > A little nicer, don''t you think? Some intelligent argument parsing > > might also be added to get rid of those null attribute parameters. > > > Anyway, I''m submitting this as a suggestion to be incorporated into > > the next release of prototype.js. Let me know what you think. > > > Cheers, > > Erik--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On May 7, 10:53 am, Rod <r...-1O4OMqRgiKA@public.gmane.org> wrote:> I really like what Dan Webb has done in LowPro (http://www.danwebb.net/ > lowpro) for making DOM building easier. His site isn''t responding just > at the moment so I can''t grab his exact code, but since I still prefer > scripty''s Builder.node() I have this in my extensions that achieves > the same result: > > ("p|div|span|strong|em|img|table|tr|td|th|thead|tbody|tfoot|pre| > code|" + > "h1|h2|h3|h4|h5|h6|ul|ol|li|form|input|textarea|legend|fieldset|" > + > "select|option|blockquote|cite|br|hr|dd|dl|dt|address|a|button|abbr| > acronym|" + > "script|link|style|bdo|ins|del|object|param|col|colgroup|optgroup| > caption|" + > "label|dfn|kbd|samp|var").split("|").each( > function(el) { > window[''$'' + el] = function() { > return Element.extend(Builder.node.apply(Builder, > [el].concat(Array.prototype.slice.apply(arguments)))); > }; > }); > > And you end up with a $-prefixed function for each different type of > element, so you could do your above table something like this: > > var table = $table({ id: ''myTable'' }, { > $thead({ > $tr({ $th(''Title A''), $th(''Title B'') }) > }), > $tbody({ > $tr({ $td(''Cell A''), $td(''Cell B'') }) > }) > }); > > Which I reckon makes it pretty readable.Compared to the equivalent HTML: <table id="myTable"> <thead> <tr><th>Title A<th>Title B <tbody> <tr><td>A<td>B </table> It seems verbose. -- Rob --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---