ugrás a tartalomhoz

prototype.js - lehet egyszerűbben?

Babar · 2007. Május. 1. (K), 23.32
Ismerkedem a prototype-al, csináltam benne 2-3 diszkrét js példát, de lehet, hogy lehetne egyszerűbben/jobban is. Szóval az alábbiak működnek, de könnyen lehet, hogy a prototype lehetőségeit nem használtam ki, vagy nem illeszkedik a megoldásom a prototype filozófiájához.

Először csináltam két egyszerű fv-t:

    // egy elem első adott típusú szülőjét adja vissza - az elemet magát is beleértve
    // pl: getParentNode(getElementById('new'),'FORM');
    getParentNode = function(element, nodeName) {
        e = element;
        while(e.nodeName != nodeName && e.parentNode)
            e = e.parentNode;
        return e;
    }

    // egy elem első adott class-ú szülőjét adja vissza - az elemet magát is beleértve
    // pl: getParentNodeByClassName(getElementById('new'),'anyClass');
    getParentNodeByClassName = function(element, myClassName) {
        e = element;
        while(!Element.hasClassName(e, myClassName) && e.parentNode) {
            e = e.parentNode;
        }
        return e;
    }
Aztán a window.onload eseményhez írtam egy fv. Ebben három funkciót szerettem volna megvalósítani:
1. Adott elemen kattintva más elem(ek) kinyitását/becsukását.
2. Egy select változásakor (onchange) az ót tartalmazó form submit eseménye fusson le
3. Egy elemre (mondjuk egy button-ra) kattintva az őt tartalmazó form submit eseményének jóváhagyására kérdezzünk rá (a kérdés szövege a title paraméterbe kerül)

function myLoader(evt) {

    // Az onClickHideShow elem kattintásra becsukja/kinyitja az őt tartalmazó
    // hideShowContainer elemen belüli openable elemeket
    var OpenerObject = Class.create();
    OpenerObject.prototype = {

       initialize: function(opener) {
            this.opener = $(opener);
            this.container = getParentNodeByClassName(this.opener,'hideShowContainer');
            this.openable = document.getElementsByClassName('openable',this.container);
            this.opener.onclick =
               this.openClose.bindAsEventListener(this);

       },

       openClose: function(evt, extraInfo) {
            $A(this.openable).each(
                function(element, index) {
                    Element.toggle(element);
                }
            );
       }
    };

    var openers = new Array();
    $$('.onClickHideShow').each(
        function (elem, index) {
            openers.push(new OpenerObject(elem));
        }
    );

    // Az onChangeSubmit select elemre megváltozása a form sumbit-jét is magával vonja
    var OnChangeSubmitObject = Class.create();
    OnChangeSubmitObject.prototype = {
        initialize: function(selectElement) {
            this.selectElement = $(selectElement);
            this.formElement = getParentNode(this.selectElement,'FORM');
            this.selectElement.onchange =
                this.submitForm.bindAsEventListener(this);

        },

        submitForm: function(evt, extraInfo) {
            this.formElement.submit();
       }
    }

    var submitSelects = new Array();
    $$('.onChangeSubmit').each(
        function (elem, index) {
            submitSelects.push(new OnChangeSubmitObject(elem));
        }
    );
    // A confirm elemre kattintva a form jóváhagyását előbb jóvá kell hagyni
    var ConfirmObject = Class.create();
    ConfirmObject.prototype = {
        initialize: function(element) {
            this.element = $(element);
            this.formElement = getParentNode(this.element,'FORM');
            this.element.onclick =
                this.confirmSubmit.bindAsEventListener(this);

        },

        confirmSubmit: function(evt, extraInfo) {
            if (confirm(this.element.getAttribute('title'))) this.formElement.submit();
            else return false;
       }
    }

    var confirmElements = new Array();
    $$('.confirm').each(
        function (elem, index) {
            confirmElements.push(new ConfirmObject(elem));
        }
    );

}
És végül a myLoader eseményhez csatolása:

Event.observe(window, 'load', myLoader, false);
Minden értékes javaslatot, javítást szívesen vennék.

----
Babar
 
1

szvsz

toxin · 2007. Május. 2. (Sze), 08.35
- a getParentNode-getParentNodeByClassName miért nem jó a http://www.prototypejs.org/api/element/up ?
getParentNodeByClassName(this.opener,'hideShowContainer')
>
this.opener.up('.hideShowContainer');

- eséménykezelésre miért a DOM Level 0-ás eseménykezelő modelt?

this.opener.onclick = this.openClose.bindAsEventListener(this);
>
this.opener.observe('click',this.openClose.bindAsEventListener(this));

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

- szvsz érdemesebb az 1.5-el bevezett 'chain method' használni, egységesen a kódban
Element.toggle(element);
>
element.toggle();
http://www.prototypejs.org/api/element

üdv t
2

Épp ilyenekre gondoltam...

Babar · 2007. Május. 2. (Sze), 11.52
Épp ilyen észrevételeket szerettem volna begyűjteni. Köszönöm! :)

Az up metódus teljesen elkerülte a figyelmemet, pedig gyanítottam, hogy kell legyen ilyen funkció.

A másik kettő is hasznos, bár inkább formai, szemlélet beli kérdés - de megfogadom a tanácsot!

----
Babar