Select dynamically generated element by id in Titanium Appcelerator - appcelerator

Question

I am working with the latest Tianium Appcelerator and my project is using Alloy.
I have a TableView with the id: tblResults
In my controller, I populate this table view with rows like this:
// Dummy data
var results = [];
results.push({
title: 'Hello World',
value: '123456'
});
results.push({
title: 'Bye World',
value: '654321'
});
// Build result data
var resultData = [];
for (var i = 0; i < results.length; i++) {
resultData.push(createResultRow(
results[i].title,
results[i].value
));
}
// Method to create result row
function createResultRow(myTitle, myValue) {
var tableRow = Titanium.UI.createTableViewRow({
height: 160
id: 'row-'+ myValue
});
var tableRowView = Titanium.UI.createView({
layout: 'horizontal'
});
var myButton = Titanium.UI.createButton({
title: myTitle,
btnValue: myValue
});
myButton.addEventListener('click', function(e) {
handleButtonClick(e);
});
tableRowView.add(myButton);
tableRow.add(tableRowView);
return tableRow;
}
// Set table data
$.tblResults.setData(resultData);
// Method to handle button click
function handleButtonClick(e) {
if (e.source && e.source.btnValue) {
// how to select row having a id: 'row-'+ e.source.btnValue ???
}
}
What this will do is, generate a dummy array of objects. Then using that, populate the table view with row that has a view, within it there is a button.
What I am trying to achieve is, when the button is clicked, I want to select the table row having the id like this:
'row-'+ e.source.btnValue
in pure javascript/jquery DOM style, I would have done something like this:
$('#row-'+ e.source.btnValue)
How can I achieve this in Titanium Appcelerator? Is there a element selector functionality of some sort like in jQuery?

Answer 1

This is a very often requested feature that we don't currently support, but should. Right now, you'd have to keep a hash of id -> view reference and look it up that way. However, I opened a Feature Request here https://jira.appcelerator.org/browse/TIMOB-20286

Answer 2

If you have a select method on rows, you can do like this:
$.table.addEventListener('click',function(e) {
if(e.row.select) e.row.select();
//or
if(rows[e.index]) rows[e.index].select();
});

Answer 3

For tables and lists views always use the click and itemclick event on the table/list. These events provide you with both the selected row (e.row) as well as the actual view clicked upon (e.source). It is also more efficient then having a listener on the buttons of all rows.
Your code would look like:
$.tblResults.addEventListener('click', handleButtonClick); // or bind in XML
// Method to handle button click
function handleButtonClick(e) {
// user tapped on button
if (e.source.btnValue) {
var row = e.row;
}
}