[Proto-Scripty] Javascript Prototype Best Practice Event Handlers

[ncubica]

Hi this question is more a consulting of best practice, Sometimes when
I'm building a complete ajax application I usually add elements
dynamically for example. When you'r adding a list of items, I do
something like:

var template = new Template("<li id='list#{id}'>#{value}</li>");
var arrayTemplate = [];
arrayOfItem.each(function(item, index){
arrayTemplate.push(template.evaluate( id : index, value : item))
});
after this I have two options add the list via "update" or "insert"

----- $("elementToUpdate").update("<ul>" + arrayTemplate.join("") + "</
ul">);

the question is

how can I add the event handler without repeat the process of read the
array, this is because if you try add a Event before the update or
insert you will get an Error because the element isn't still on the
DOM.

so what I'm doing by now is after insert or update:

arrayOfItem.each(function(item, index){
$("list" + index).observe("click", function(){
alert("I see the world");
})
});
so the question is exist a better way to doing this??????

--
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-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[T.J. Crowder]

Hi,

If you really want to watch each individual `li` directly, then what
you have seems perfectly straightforward. But in that situation,
barring a really good reason to do it that way, I wouldn't use a
handler on each `li`; I'd listen for clicks on the elementToUpdate (or
the `ul` within it) instead with just a single handler:

$("elementToUpdate").observe("click", function(event) {
var li;

// Find out which `li` was clicked:
li = event.findElement("li");
if (li) {
// Do something with the `li`
}
});

Prototype 1.7 has a new feature to simplify that a bit:

$("elementToUpdate").on("click", "li", function(event, li) {
// Do something with the `li`; note it's given as the second
// argument to the function
});

...where behind the scenes, Prototype is basically doing what I did
above. You'll want the first version if you're still using 1.6 (and
since 1.7 is still at RC1, I expect you probably are).

HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com

[ncubica]

oooooooooooohhhhh!!! that was great thank a lot I will improve my
code, and yes I was watch each individual li. I will post the answer
in http://stackoverflow.com/questions/2794885/javascript-prototype-best-practice-event-handlers
thanks T.J.

[T.J. Crowder]

LOL Glad that helped. (I'm surprised I missed it on SO, but I've been
busy.)

-- T.J. :-)

On May 11, 5:40 pm, ncubica <ncub...@gmail.com> wrote:
> oooooooooooohhhhh!!! that was great thank a lot I will improve my
> code, and yes I was watch each individual li. I will post the answer

> inhttp://stackoverflow.com/questions/2794885/javascript-prototype-best-...