Appcelerator / Titanium Alloy - how to manipulate a string before it gets added to the view

Question

I have a Titanium Alloy view, which outputs a TableView with an image thumbnail for each one. This is achieved by passing a URL into the image attribute of the ImageView element. As it is an Alloy view populated by an Alloy collection, it handles the looping of data for me:

<TableView id="brandsList" dataCollection="brands">
    <TableViewRow brandID="{brand_id}">
        <View class="vgroup">
            <ImageView height="45" width="80" id="image" image="{image}" />
            <Label id="name" text="{name}" />   
        </View>             
    </TableViewRow>
</TableView>

However, I'd like to change that URL string a bit before it gets to the view above. Specially I need add some values in the middle of the URL which change the image quality and size. How can I catch this string string value and make my changes?

Answer 1

from the looks of this code it appears you are doing data-binding. you can transform data before it is presented in the view

http://docs.appcelerator.com/titanium/latest/#!/guide/Alloy_Data_Binding

<TableView id="brandsList" dataCollection="brands"  dataTransform="transformFunction">
    <TableViewRow brandID="{brand_id}">
        <View class="vgroup">
            <ImageView height="45" width="80" id="image" image="{image}" />
            <Label id="name" text="{name}" />   
        </View>             
    </TableViewRow>
</TableView>

then in the code

function transformFunction(model) {
    // Need to convert the model to a JSON object
    var transform = model.toJSON();
    transform.image = /* do someting to image url string */;
    return transform;
}