ugrás a tartalomhoz

Diszkrét JavaScript update-elt tartalomra (prototype)

Babar · 2007. Okt. 10. (Sze), 00.07
Prototype-al próbálok class-onként tulajdonságokkal felruházni elemeket. Az elemek eseménykezelőit az onLoad eseménykezelője rendeli az elemekhez, például a class="ajaxUpdater" osztályba tartozókhoz így:
  1. Event.observe(window, 'load', myLoader, false);  
  2.   
  3. function myLoader(evt) {  
  4.   
  5.     ...   
  6.   
  7.     var AjaxUpdaterObject = Class.create();  
  8.     AjaxUpdaterObject.prototype = {  
  9.         initialize: function(element) {  
  10.   
  11.             this.element = $(element);  
  12.             this.id = this.element.getAttribute('id');  
  13.             this.url = $F(this.id+'Url');  
  14.             this.myAjax = new Ajax.Updater(  
  15.                 this.id,  
  16.                 this.url,  
  17.                 {  
  18.                     method: this.element.getAttribute('method'),  
  19.                     parameters: $F(this.id+'Pars'),  
  20.                 }  
  21.             );  
  22.         }  
  23.     }  
  24.   
  25.     var ajaxUpdaterElements = new Array();  
  26.     $$('.ajaxUpdater').each(  
  27.         function (elem, index) {  
  28.             ajaxUpdaterElements.push(new AjaxUpdaterObject(elem));  
  29.         }  
  30.     );  
  31.   
  32. }  
A gondom akkor van, ha az oldalon egy részt ajaxUpdater-rel lecserélek. Az új elemek eseménykezelőit hogy állítsam be? Próbáltam az onComplet esetén meghívni valami függvényt, ami elvégzi a hozzárendelést, de nem működik (onComplet: myUpdateLoader(this.element) { ... })? Hogy kellene ezt rendesen megcsinálni?
‹ Üres sor file elejen URL manipuláció Javascripttel ›
 ■
1

onComplet???

rrd · 2007. Okt. 10. (Sze), 09.28
Gondolom csak elírás volt mert az nem onComplet hanem onComplete. Egyébként meg így kellene:
  1. onComplete : function(){  
  2.   Event.observe(ujElemed, 'click', myUpdateLoader.bindAsEventListener(ujElemed));  
  3.   }  
3

Igen, elírás...

Babar · 2007. Okt. 10. (Sze), 10.30
Igen, az onComplet elírás volt. :)

Igaziból az 'ujElemed' megtalálása volt a fő gondom, de közben rájöttem, hogy az Event.element-ből kiindulva meg tudom találni az érintett elemeket - bár még nem írtam meg, de gondolom menni fog (a $$ helyett az element.getElementsBySelector-ral, hogy csak az update-elt rész eseménykezelőit módosítsa).

Köszönöm!
2

delegálás

wiktor · 2007. Okt. 10. (Sze), 09.36
Esetleg érdemes megpróbálnod, hogy nem adott classhoz rendelsz eseményt, hanem egy olyan szülő elemhez, ami nem változik, nem frissül. Mivel az esemény eljut ehhez az elemhez is (event bubbling), itt meg tudod nézni, hogy honnan jött, olyan elemtől jött-e, aminek van ajaxUpdater classa. Ha igen, akkor lefuttatod amit kell.

Így nem kell a dom módosítás után felprogramoznod egyesével az elemeket és ha jól csinálod, akkor elég 1 elemet felprogramozni, ráadásul ezáltal még gyorsabb is lehet a betöltődés.

Itt egy jó cikk és egy példa:
http://www.cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders
4

Ez tényleg jó...

Babar · 2007. Okt. 10. (Sze), 10.34
Ez tényleg jobb koncepció, köszönöm, újat mondtál :). Ahol lehet megpróbálom átalakítani - kód szinten is egyszerűsödik a dolog, és az update probléma megszűnik tényleg!