Appcelerator Titanium Alloy: How to store data on a ScrollableView to use in click event

Question

I have a ScrollableView, which has some images and labels inside each child view. However, I would like to store a ID value for each item, so that I can use it inside an onClick event. This ID could the be used to query the database or open up a new controller the value passed in.

I thought about adding an attribute on the view, to store my ID, like so

<ScrollableView dataCollection="videos" id="mainCarousel">
    <View onClick="carouselItemClick" itemID="{the_id}">
        <ImageView image="{episode_img_cached}"></ImageView>                
        <Label text="{title}" id="mainCarouselTitle"></Label>              
        <Label text="{series_txt}" id="mainCarouselSeriesDetails"></Label>    
        <Label text="{episode_txt}" id="mainCarouselEpDetails"></Label>
    </View>
</ScrollableView>

In my carouselItemClick I'd like to do something like this:

function carouselItemClick(event) {
    var selectedItemID = event.source.itemID; // get the ID from the view clicked
    var view = Alloy.createController("episode", itemID).getView();
}

In my function above, I've tried to find that itemID attribute, but it's not there.

How can I store the value of {the_id} on this view, so that when I click/tap on it, I can use it to open up a new controller with that value passed as an argument?

Answer 1

event.source will be the label or image that you actually clicked on. Set touchEnabled="false" on the child image and labels, and your code should work as expected.