[JS] Gerefereerde functie en event

[BikkelZ]

Ik ben bezig om een dynamische pagina te maken, waarbij de objecten ook zelf zorgen dat ze gerenderd worden. Ik heb een bepaalde functie, en ik wil dat in die functieaanroep het event gebruikt wordt. Nu kan ik dus wel bepaalde referenties mee geven, maar ik kan geen referentie meegeven naar iets wat nog niet gebeurd is.

Ik heb de volgende code:

JavaScript:

    this.getRenderedControl = function()
    {
        if (customerControl == null)
        {
            // creat the dom node
            customerControl = document.createElement('DIV');
            customerControl.style.width = '150';
            customerControl.style.backgroundColor = color;
            customerControl.innerHTML = customerName + " - " + projectName;
            handler = doDrag;
            customerControl.onmousedown = function()
            {
                handler.call(customerControl, event);
            }
        }
        return customerControl;
    }

Hoe zorg ik er voor dat die control op dat moment die functie aanroept met het event? Hij geeft nu logischerwijs aan dat hij event niet kent.

[glashio]

JavaScript:

            customerControl.onmousedown = function(e)
            {
                handler.call(customerControl, e);
            }

Dit bedoel je ?

[BikkelZ]

Wacht, hij callt hem nu meteen. Ik moet nog iets fout doen....

-----

Hij callt pas als ik klik.....natuurlijk.

Maar e heeft geen properties.

[ Voor 41% gewijzigd door BikkelZ op 14-08-2008 13:13 ]

[crisp]

JavaScript:

customerControl.onmousedown = doDrag;

Zou toch gewoon goed moeten zijn? en dan in doDrag nog wat fixen voor IE die geen event object als argument meestuurd:

JavaScript:

function doDrag(e)
{
  e = e || event;

  // 'this' verwijst in deze setting naar je customerControl div
}

[ Voor 8% gewijzigd door crisp op 14-08-2008 14:02 ]

[BikkelZ]

doDrag moet aangeroepen worden met een referentie naar de Project klasse ('this', waar die functie in zit (ik doe het in het voorbeeld ook verkeerd zie ik nu)). Dus een gewone referentie naar de functie is niet genoeg, want er moet nog wat meer meegestuurd worden behalve het event.

JavaScript:

    this.getRenderedControl = function()
    {
        if (customerControl == null)
        {
            // creat the dom node
            customerControl = document.createElement('DIV');
            customerControl.style.width = '150';
            customerControl.style.backgroundColor = color;
            customerControl.innerHTML = customerName + " - " + projectName;
            handler = doDrag;
            self = this;
            customerControl.onmousedown = function(e)
            {
                handler.call(self, e);
            }
        }
        return customerControl;

De doDrag functie kan dan weer de Projectklasse aanroepen om bepaalde zaken af te handelen na het slepen. Bijvoorbeeld verwijderen.

[ Voor 53% gewijzigd door BikkelZ op 14-08-2008 14:12 ]

[crisp]

Doe dan gewoon 1 keer dit:

JavaScript:

Function.prototype.bind = function()
{
    var handler = this, args = [].slice.call(arguments, 0), obj = args.shift();

    return function()
    {
        return handler.apply(obj, args.concat([].slice.call(arguments, 0)));
    }
}

en dan kan je voortaan dit in je code doen:

JavaScript:

customerControl.onmousedown = doDrag.bind(this);

[BikkelZ]

JavaScript:

// uit Project
            // creat the dom node
            customerControl = document.createElement('DIV');
            customerControl.style.width = '150';
            customerControl.style.backgroundColor = color;
            customerControl.innerHTML = customerName + " - " + projectName;
            customerControl.onmousedown = doDrag.bind(this);

// eerste stuk functie doDrag
  function doDrag(clickedItem, e)
  { 
    alert(clickedItem);
    alert(e);

Nu is clickedItem een event en e doet niets?

[crisp]

wat moet clickedItem zijn dan? een referentie naar je customerControl div?

Welke scope wil je nu uiteindelijk hebben in doDrag? Nu verwijst 'this' naar je Project instance. Als customerControl daar een property van is dan kan je dit doen:

JavaScript:

function doDrag(e)
{
  alert(this.customerControl);
}

Als je die echter als argument wilt meegeven dan moet je dit doen:

JavaScript:

customerControl.onmousedown = doDrag.bind(this, customerControl);

Als alternatief kan je het clickedItem-element natuurlijk ook via e.target/e.srcElement afvragen

[ Voor 9% gewijzigd door crisp op 14-08-2008 14:39 ]

[BikkelZ]

Sorry voor de verwarring, er staan wat oude namen in de code omdat ik het van een simpele PoC aan het omzetten ben naar iets wat wat netter objecten gebruikt.

Kort gezegd wordt het volgende gedaan:

- Ieder Project heeft een bijbehorend vlakje met wat tekst wat onLoad dynamisch opgebouwd wordt en in de DOM tree gehangen wordt wat je kunt draggen
- Als je dragt, genereert het Project een nieuw (half transparant) vlakje met een koppeling naar het Project
- Je kunt het dragvlak droppen in een dropbox, waarna Project een trigger krijgt om op te slaan in welke dropbox hij neergezet is

Dus de var name 'clickedItem' daar moet je je niet door laten afleiden , dat moet dus een referentie zijn naar het project.

JavaScript:

  function doDrag(project, e)
  { 
    alert(project);
    alert(e);

    clickedItem = project.getRenderedControl();
    // etcetera

[ Voor 3% gewijzigd door BikkelZ op 14-08-2008 15:29 ]

[BikkelZ]

Ik heb nu this in doDrag gebruikt en inderdaad werkt dat nu.

[crisp]

Jep, zo doe ik dat meestal ook: handler uitvoeren in de scope van de javascript object instantie, waar de bijbehorende HTML objecten weer properties van zijn. Dan heb je maar 1 argument nodig voor je handlers: het eventobject. De rest is dan via de scope te achterhalen