Select dynamically generated element by id in Titanium Appcelerator

问题

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?

回答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

回答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();
});

回答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;
    }
}

来源：https://stackoverflow.com/questions/35068169/select-dynamically-generated-element-by-id-in-titanium-appcelerator

标签

appcelerator

appcelerator-titanium

appcelerator-alloy