OO design question

[King Albert]

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

 

[RobG]

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

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.

Problem in the eventhandler below :

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

I need 'this' to refer to Tabel, not to the clicked element !

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.

 

[King Albert]

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

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