How do I access the object instance from within class

[wilkinson.philip]

I have a javascript object which dynamically generates a table adding,
deleting and moving rows as the user clicks on buttons or links.
Problem is when I generate a table row and add the javascript method
call to my class, I have to put the object instance name variable of
the class in order for it to be called from the onclick=function().
This is seriously limiting, but I'm stuck for a way round it. Heres a
edited of the code so you get the idea....

Instantiating the object :-

var dtl = new DynamicTableList("table1", $
{myObject.allFieldsAsJavaScriptArray}, true, true, true);


My javascript class DynamicTableList, note the dtl javascript object
instance variable being referred to in the addRow function. How can I
avoid this???

function DynamicTableList(thisObjName, tableName, options, showDelete,
showUp, showDown)
{
this.processRow = function(r, row, up, down)
{
...
};

this.processRows = function()
{
...
};

this.getVisibility = function(visible)
{
...
};

this.delRow = function(button)
{
...
};

this.addRow = function(selection)
{
...

if (showDelete)
{
var cell2 = document.createElement('TD');
var inp2 = document.createElement('IMG');
/
*************************************************************************************************/
inp2.onclick=function(){dtl.delRow(this);} // Have to specify
dtc!!!!!!!!
/
*************************************************************************************************/
inp2.title='Delete';
inp2.alt='Delete';
inp2.src='images/delete.gif';
cell2.appendChild(inp2);
row.appendChild(cell2);
}

...

tbody.appendChild(row);

this.processRows();
};

this.moveRow = function(node, vector)
{
};
}

Obviously the code dtl.delRow(this); is being dynamically generated,
but how do I replace the dtl instance name with something that'll work
whatever the user of this class calls the instance of it!

Cheers, in advance for any help.
Philip Wilkinson.

 

[Peter Michaux]

I have a javascript object which dynamically generates a table adding,
deleting and moving rows as the user clicks on buttons or links.
Problem is when I generate a table row and add the javascript method
call to my class, I have to put the object instance name variable of
the class in order for it to be called from the onclick=function().
This is seriously limiting, but I'm stuck for a way round it. Heres a
edited of the code so you get the idea....

Instantiating the object :-

var dtl = new DynamicTableList("table1", $
{myObject.allFieldsAsJavaScriptArray}, true, true, true);

My javascript class DynamicTableList, note the dtl javascript object
instance variable being referred to in the addRow function. How can I
avoid this???

function DynamicTableList(thisObjName, tableName, options, showDelete,
showUp, showDown)
{
this.processRow = function(r, row, up, down)
{
...
};

this.processRows = function()
{
...
};

this.getVisibility = function(visible)
{
...
};

this.delRow = function(button)
{
...
};

this.addRow = function(selection)
{
...

if (showDelete)
{
var cell2 = document.createElement('TD');
var inp2 = document.createElement('IMG');
/
*************************************************************************************************/
inp2.onclick=function(){dtl.delRow(this);} // Have to specify
dtc!!!!!!!!
/
*************************************************************************************************/

I think you want to change the content between the asterisks to the
following two lines.

var thisC = this; // 'this' refers to the instance of DynamicTableList
inp2.onclick = function() {thisC.delRow(this);}; // 'this' referes to
the HTML element that was clicked

The issue here is closures and the binding of the 'this' keyword which
is tricky at first in JavaScript. The 'thisC' variable holds a
reference to the dynamic table list instance. The 'this' in the second
line is resolved at runtime and so point to the HTML element that was
clicked.

If I remember correctly, I heard Brendan Eich, creator of JavaScript,
say that in JavaScript 2.0 the binding of "this" in inner functions
will be the same 'this' as the outer functions. That would mean no
need for the 'thisC' technique above. This will be a backwards
incompatible change and doesn't sound like a good move to me. For
example, how to write the second of the lines I wrote above so that
when delRow() runs it has a reference to the HTML element that was
clicked? It isn't necessarily possible to get it from the event object
because the event's target is the most deeply nested element in DOM
that received the click.

I don't know if the following discusses the 'this' keyword but it is
an article about closures in general

<URL: http://www.jibbering.com/faq/faq_notes/closures.html>

Peter

 

[wilkinson.philip]

Thanks Peter, that worked perfectly and makes total sense.
Cheers, Philip Wilkinson.