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." <[EMAIL PROTECTED]> 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 [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
-~----------~----~----~----~------~----~------~--~---
