[JS] Class die nodes genereert die weer 'terug' communiceren

[BikkelZ]

Ik heb een (werkend) adresinvoer en -validatie script gemaakt, maar in plaats van functies en statische html wil ik nu met een klasse gaan werken, zodat ik ook meerdere adresinvoervelden in een pagina kan gebruiken zonder geklooi.

Dus ik heb het nu zo gemaakt dat er een functie is die een paar parameters ontvangt, en vervolgens nodes genereert en die aan de parent_obj (een van de parameters) hangt. Dit werkt inmiddels ook.

Maar nu heeft iedere instantie van de Address class een x aantal booleans (street_ok, zip_ok, etc) die allemaal op true moeten komen te staan voordat een interne variabele address_ok op true komt te staan of optioneel een functie uitgevoerd dient te worden.

Waar het probleem nu in zit, is het feit dat ik wil dat de nodes die die Address genereert, ook weer valideren via de functies van die specifieke instantie van Address, kortom de weg terug nog weten, omdat ik uiteindelijk wil weten of alle velden van die instantie van Address correct zijn ingevuld. En dan ben ik het even kwijt.

Hoe?

--------

edit:

Ik heb nu dit:

JavaScript:

addrBedrInput.setAttribute("onkeyup", this.checkBedrijfsnaam(addrBedrInput));

Dus ik stuur een instantie van de functie mee en een referentie naar de node mee. Dus dan zou this.checkBedrijfsnaam(addrBedrInput)) er vanuit de andere kant min of meer uit moeten zien als:

HTML:

<input name="bla" onkeyup="address_instance.checkBedrijfsnaam(this)" />

Wat ik echter zie in de 'view selection source' is dit:

HTML:

<input onkeyup="undefined" name="bla" />

Wel wordt de functie die ik dus mee probeer te sturen een keer getriggerd, namelijk direct na de refresh.

----------------

Edit2:

JavaScript:

addrBedrInput.setAttribute("onkeyup", this.checkBedrijfsnaam);

Vanuit de class levert het volgende op:

HTML:

<input onkeyup="function (veld) {
    alert(veld.name);
}" name="bla" />

Ik ben er echt bijna.....

[ Voor 30% gewijzigd door BikkelZ op 16-03-2007 14:11 ]

[crisp]

setAttribute is niet bedoelt voor event-handlers, daar heb je addEventHandler voor en in IE attachEvent, of gewoon de crossbrowser DOM level 0 manier: element.onkeyup = functionref

In jouw geval:

JavaScript:

addrBedrInput.onkeyup = this.checkBedrijfsnaam;

Je hoeft verder geen argumenten mee te geven, in je method verwijst 'this' al naar je input-element.

[BikkelZ]

JavaScript:

    this.checkBedrijfsnaam = function(this)
    {
        alert(this.name);
    }

Dat werkt natuurlijk niet. Hoe moet ik de refererende node noemen binnen die functie?

Of moet ik het zo doen?

JavaScript:

    this.checkBedrijfsnaam = function()
    {
        alert(addrBedrInput.name);
    }

[ Voor 25% gewijzigd door BikkelZ op 16-03-2007 14:16 ]

[BikkelZ]

Ja dat werkt inderdaad.

Maar dan is mijn vraag in principe nog steeds niet beantwoord.

[ Voor 8% gewijzigd door BikkelZ op 16-03-2007 14:17 ]

[crisp]

Dit zou gewoon moeten werken:

JavaScript:

this.checkBedrijfsnaam = function()
{
    alert(this.name);
}

[BikkelZ]

Hmm verrek. Ja dat werkt dus wel. Maar dan moet ik de parentclass weer aanroepen binnen die functie door het 'self = this;' trucje merk ik.

[crisp]

BikkelZ schreef op vrijdag 16 maart 2007 @ 14:46:
Hmm verrek. Ja dat werkt dus wel. Maar dan moet ik de parentclass weer aanroepen binnen die functie door het 'self = this;' trucje merk ik.

Inderdaad; closures gebruiken

Je kan het ook omdraaien: je handler in de scope van je class instance uitvoeren en het input-element als argument meegeven:

JavaScript:

var self = this;
var handler = this.checkBedrijfsnaam;
addrBedrInput.onkeyup = function()
{
  handler.call(self, addrBedrInput);
}

ik gebruik meestal een global helperfunction voor dat soort dingen:

JavaScript:

function bind(object, handler, params)
{
    if (params === undefined) params = [];
    else if (!(params instanceof Array))
        params = [params];

    return function()
    {
        var extra = [];
        for (var i = 0; i < arguments.length; i++)
            extra.push(arguments[i]);

        return handler.apply(object, params.concat(extra));
    }
}

en dan in je class:

JavaScript:

addrBedrInput.onkeyup = bind(this, this.checkBedrijfsnaam, addrBedrInput);

[ Voor 64% gewijzigd door crisp op 16-03-2007 14:55 ]