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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
