Passing reference to a class as a custom property in a TableViewRow

Hi Guys

I have a TableView, where each row is made up of a complicated set of images, text, etc. These are all encapsulated within a commonJS module "Thing.js". If a row is clicked,an extension slides out below the row. Only one row may be extended at a time, so if you touch a row and then another, the first extension closes and the second opens. If you touch the same row twice the extension will open then close.

So, in the code below, this.openRow tracks the open row, and is initiated to null. a "Thing" is instantiated and included in a TableViewRow as a custom property, "ride".

An Event Listener is created on the row, and in it the e.source is used to get a reference to the row itself. I then check the combinations of openRow and e.source.ride.

The problem is e.source.ride is always null, it appears that the ride:myThing is being ignored. I would appreciate any help in understanding what is going on.

this.openRow = null;
   var that = this;
 
    ...
 
    var myThing = new Thing();
    var row = Ti.UI.createTableViewRow ({ ride:myThing });
 
    row.add(myThing.getComplicatedView());
 
    row.addEventListener('click', function(e) {
        if (that.openRow != null)  { Ti.API.info('Close');  }
 
        if (that.openRow == e.source.ride)  { 
            Ti.API.info('clear'); 
             that.openRow = null;
       }
        else {
            Ti.API.info('Open');
            that.openRow = e.source.ride;
        }
    });

I've never tried what you're doing, but if I had to guess, I would say that these extra properties you're adding to the TableViewRow probably need to be simple JSON-serializable objects. I didn't find direct confirmation of that in the docs, but it's fairly likely.

If you really need to use these objects in the click event listener, what if you kept them in an array, then set an index value on the row, and in the click event listener, you could look up the Thing object in the array by its index?