ugrás a tartalomhoz

prototype, bind...

stristi · 2008. Okt. 16. (Cs), 12.40
Sziasztok!

Egy új div létrehozásakor update-tel szeretnék neki HTML kódot (táblázat, input mezők stb) átadni, aminek az onchange eseményében egy másik saját függvényt szeretnék meghívni. Valahogy így:

fuggveny1: function() {
gusztustalanmegoldas = this;

var htmlkod = "<table><tr><td>Beviteli mezo</td><td><input name = 'i1' type = 'text' onchange = 'gusztustalanmegoldas.fuggveny2(value);' value = '0' /></td></tr></table>";

this.ujdiv = new Element("div").update(htmlkod);
this.parent.appendChild(this.ujdiv);
}

fuggveny2: function() {
//masik fuggveny
}

A problémám, hogy a stringen belül a this által mutatott objektum a HTMLInputElement lesz, ezért csak meggányolni tudtam egy globális változóval.
Úgy tudom a bind az ilyen this-el kapcsolatos anomáliák feloldására van, de hogy ebben a konkrét esetben hogyan tudnám alkalmazni, arra még nem jöttem rá. Valakinek 5lete?

Üdv:
István
‹ Div tartalmának frissítése ajaxal. IE z-index probléma ›
 ■
1

observe

duplabe · 2008. Okt. 16. (Cs), 19.54
Szia,

az ujdiv-ből kiindulva menj le a dom fában az inputig es observ-vel rakdt rá az event-et.

ujdiv.down('input').observe(fuggvenyNeve);
2

observe?

stristi · 2008. Okt. 22. (Sze), 09.34
Még nem egészen értem a dolgot. Átalakítottam a kódot úgy, hogy az egyes elemekre objektumként tudjak hivatkozni. Így nem kell lemennem a dom fában, hanem közvetlenül tudok rájuk hivatkozni. De hogy rakom rá az eventet? Az alábbi kód nem egészen azt csinálja amit szeretnék.

fuggveny1: function() {
this.ujdiv = new Element("Div");
document.appendChild(this.ujdiv);
this.b1 = new Element("Input", {"type": "button", "value": "Kiértékelés"});
this.b1.observe(this.fuggveny2());
this.ujdiv.appendChild(this.b1);
}

fuggveny2: function() {
alert(this);
}

Üdv: István
4

No, csak lett egy egész

stristi · 2008. Okt. 22. (Sze), 13.19
No, csak lett egy egész tűrhető megoldás.

this.b1.onclick = this.fuggveny2.bindAsEventListener(this);

vagy ha több utasítást akarok meghívni

this.b1.onclick = function(){
this.fuggvey2();
this.fuggveny3(); //stb
}.bindAsEventListener(this);

Azért kíváncsi lennék arra observe féle megoldásra az eredeti kérdésnél a stringként átadott htmlkódhoz. Csak okulásképp.

Köszi az eddigi választ is.
Üdv: István
3

Sőt ez a megoldás sem

stristi · 2008. Okt. 22. (Sze), 09.39
Sőt ez a megoldás sem működik, a probléma ugyan az mint az elején, a fuggveny2() függvényt nem találja, mert a this által mutatott objektum a HTMLInputElement lesz:

this.b1.onclick = function(){this.fuggveny2()};

Üdv: István
5

Bármely dom beli objektumra

duplabe · 2008. Okt. 22. (Sze), 23.13
Bármely dom beli objektumra (gomb, link, kép, div, span, bármi...) tudsz rakni eseményeket (onclick,onfocus, stb...) az observe függvénnyel, így:

http://www.prototypejs.org/api/element/observe

$(element).observe('click', function(event){
  alert(Event.element(event).innerHTML);
 });
Itt van a részletes observe leírás: http://www.prototypejs.org/api/event/observe

A Te esetedben: van egy függvényed, amit ha jól látom az input onchange-re akarsz rakni (megjegyzés: ha jól rémlik a Firefoxban csak akkor futnak le az onchange események inputon, ha az inputról lekerül a focus és volt változás benne, tehát ha azt akarod, hogy minden billentyűleütésre meghívódjon a függvény, akkor onkeydown-t használj)

Itt jön létre a div, és bele is rakod a htmlkod stringet.
Utána ugyanebben a divben lemegyünk az első inputig és rárakjuk a fuggvenyNeve függvényt az onkeydown eseményre. Prototype-ban on nélkül kell megadni az eseményeket: onload -> load, onclick -> click, stb...

this.ujdiv = new Element("div").update(htmlkod);
ujdiv.down('input').observe('keydown',fuggvenyNeve); // ezt az előző hsz-ban elrontottam...
Jöhet a fuggvenyNeve

function fuggvenyNeve(e) {
    var element = Event.element(e);
    // az element változó egy referencia arra az objektumra, 
    // amelyen az esemény bekövetkezett.
}
ui.: amikor az ujdiv-re rá akarod rakni az eseményt, hiába van előtte már létrehozva és a dom fába rakva, lehet, hogy még "fizikailag" nincs ott, ezért amikor eseményt akarsz rárakni, lehet hogy még nem létezik. Ilyenkor az ujdiv onready eseményére rakott függvénybe rakod bele a fentit.

Remélem tudtam segíteni és nem zavartalak mégjobban össze :)