Titanium: Animate an element in a ListItem/ ListView

Question

I want to animate an element in a ListItem

For example, consider the following simple ListView:

<ListView>
    <Templates>
        <ItemTemplate name="foo">
            <View layout="vertical">
                <Label color="red" id="label" bindId="bExampleLabel"/>
                <Button onClick="onClickButton">Click Me to make the label go blue</Button>
            </View>
        </ItemTemplate>
    </Templates>

    <ListSection id="exampleListSection">
        <ListItem template="foo" bExampleLabel:text="Example 1"></ListItem>
        <ListItem template="foo" bExampleLabel:text="Example 2"></ListItem>
    </ListSection
</ListView>

and the following script:

function onClickButton(e) {
    var item = $.exampleListSection.getItemAt(e.itemIndex);
    item.bExampleLabel = {
        color: 'blue'
    };
    $.exampleListSection.updateItemAt(e.itemIndex, item);
}

The above XML code simply has a ListView which contains 2 ListItem, which each contains a label and a button. When you click the button, it makes the label go blue.

However I want it so that it animates it to blue.

Usually this is done like so:

$.elementId.animate({
    color: 'blue'
});

However, I do not know how to do this in the context of a ListItem as you cannot seem to access the objects directly.

Answer 1

you can't animate ListItem in listView, you can change only the item properties accessing with bindId

templates : Dictionary

Contain key-value pairs mapping a style name (key) to an ItemTemplate (value). This property cannot be changed once a window has been opened.

if you want to set animation in listing use TableView, and you can do what you want with TableViewRow