OO design question

Discussion in 'Javascript' started by King Albert, Jan 5, 2007.

  1. King Albert

    King Albert Guest

    Question :
    Is it 'good design' to make an eventhandler a method of your class ?


    Problem in the eventhandler below :
    I need 'this' to refer to Tabel, not to the clicked element !



    function Tabel(dataset, behavior) {
    this.dataset=dataset;
    this.behavior=behavior;
    }

    Tabel.prototype.generatetable() {
    ....
    row = document.createElement("tr");
    row.onclick=this.severalbehaviors;
    ....
    }



    Tabel.prototype.severalbehaviors(e) {
    var el=e.currentTarget; //now el points to the clicked element
    ... //which is fine because I need the element
    for (var veld in this.dataset[0][0]) { // but I also need to access
    the dataset within the eventhandler
    ...
    }
    ...
    }

    thx for any help,


    Ward
     
    King Albert, Jan 5, 2007
    #1
    1. Advertisements

  2. King Albert

    RobG Guest

    If the event handler is designed to work specifically with that class,
    then it's probably a good idea. However, if it's designed to work more
    generally, you may want to create it as part of a utility library.

    You should post 'working' code, preferably a cut and paste of a minimal
    example that shows the behaviour.

    There are many ways to solve your problem, try the following:

    <style type="text/css">
    table {
    border-collapse: collapse;
    border-top: 1px solid blue; border-left: 1px solid blue;
    }
    td { border-bottom: 1px solid blue; border-right: 1px solid blue;}
    </style>
    <script type="text/javascript">

    var defDataset = ['foo','bar'];

    function Table (dataset, behavior) {
    this.dataset = dataset;
    this.behavior = behavior;
    }

    Table.prototype.generatetable = function (numRows, numCells) {

    // Create a reference to the required object
    var obj = this;
    var row, cell;
    var domTable = document.createElement('table');

    for (var i=0; i<numRows; i++){
    row = domTable.insertRow(-1);
    row.onclick = function(event){

    // Use the Function call method to set the value of this
    // within severalbehaviors to the object you want
    obj.severalbehaviors.call(obj, event);
    }

    for (var j=0; j<numCells; j++){
    cell = row.insertCell(-1);
    cell.appendChild(document.createTextNode('row '+i+', cell '+j));

    }
    }
    document.body.appendChild(domTable);
    }

    Table.prototype.severalbehaviors = function (e) {

    /* AFAIK, IE doesn't support currentTarget and has no equivalent
    * <URL: http://www.quirksmode.org/js/events_order.html#link10 >
    *
    * You may be better to use target/srcElement and go up the
    * DOM tree until you reach the first TR element, or pass a reference
    * to the TR element when attaching the event
    */
    var el = e.currentTarget;

    // Within the function, this refers to the table object IF called
    // by an event handler set by generatetable
    alert(this.dataset);

    }

    window.onload = function(){
    var t = new Table(defDataset, null);
    t.generatetable(2, 3);
    };

    </script>


    You could make the dataset a property of the DOM table and not mess
    with the this keyword.
     
    RobG, Jan 5, 2007
    #2
    1. Advertisements

  3. King Albert

    King Albert Guest

    Rob,

    thx a million,

    row.onclick=function(event) {obj.severalbehaviors.call(obj,event);}

    was what I needed. I setup a working example here :

    http://users.telenet.be/namibia/oo/


    Select the first dropdown (Bedrijf) and choose 'Aannemingen', then you
    should see tablerows, each preceded with a plus. Click the row to reveal
    an additional row of data, and notice the plus change to a minus, then
    click the minus.


    Answering your remarks:

    1. its an intranet and I can impose FF
    2. working code, next time I'll do the above first..
    3. quirksmode, I bought Koch's book on amazon, but in his introduction he
    ventilates dis-interest in JS OO, and although the event section of his
    book is excellent and his site is fantastic, your line of code should've
    been in 'section 7F:Targeting'.
    4. "dataset as a property of the DOM table":

    I don't understand, before you can create a property, you need the object
    first, like so,

    resulttbl=document.createElement("table");

    and then you could do

    resulttbl.dataset= mydatabase;
    assuming somewhere on the page is mydatabase=[{prop1:val1, etc}, {... ];

    But you need the object to be created in a constructor, which implies
    keyword 'this' .. So essentially your last suggestion is : don't do OO !
    Is this correct ?


    kind regards and thx again,


    Ward
     
    King Albert, Jan 6, 2007
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.