Titanium Alloy - How do I best assign a click event to an Option on a Option Dialog?

Question

In Titanium Alloy, I have an OptionDialog for some filter options. But I'm not sure how to add click events each of the options, according to best practice.

View

<OptionDialog id="filterDialog" title="Filter">
    <Options>
        <Option id="byDate">Date added</Option>
        <Option>Rating - high first</Option>
        <Option>Rating - low first</Option>
        <Option>Cancel</Option>
    </Options>  
</OptionDialog> 

Controller

$.byDate.addEventListener("click", function() {
    alert('Filter by date');
});

But the above event listerner causes the following error:

'undefined' is not an object (evaluating '$.byDate.addEventListener');

What's the best practice for assigning a click event to each of these options?

Answer 1

You have to create eventListener attached to OptionDialog, not every single Option and then check value of event.index property:

$.filterDialog.addEventListener('click', function(event) {
    switch (event.index) {
        case 0:
            alert('Date added selected')
            break;
        case 1:
            alert('Rating - hight selected')
            break;
        case 2:
            alert('Rating - low selected')
            break;     
    }
});

Also remember to set OptionDialog.cancel property and Titanium SDK will handle Cancel button automatically. In your case you can add it to <OptionDialog>:

<OptionDialog id="filterDialog" title="Filter" cancel="3">