Appcelerator - Hide UI element in list generated by dataCollection

Question

I am using Alloy and Alloy Collections to generate a list of views in an app. I need to be able to hide child elements within each view based on data within the model object.

For example I have a an Alloy view:

<View dataCollection="$.collectionOfStuff">
    <Label>Always visible</Label>
    <Label>Only show when {isVisible} is true</Label>
    <Label>Another label always visible</Label>
</View>

Assuming the models in $.collectionOfStuff has a isVisible property, I would like to be able to hide the second label based on that value. Setting the visible property on the Label is easy enough but this just hides the element and doesn't reclaim the space - meaning there is a gap between the first and third label. I need the second label to stop taking up space as well.

I have tried using the data binding syntax to add a hidden class to the element (<Label class="{hiddenWhenNotVisible}">) but Alloy doesn't appear to resolve data binding tags in class attributes.

This doesn't seem like it should be so difficult so I'm hoping I'm missing something obvious.

I don't think you're missing anything. I don't believe that data binding supports what you're trying to do. — Ray

Henry Orozco Henry Orozco · Accepted Answer · 2017-04-17T18:00:51

You can use the visible property like so:

<Label visible="{isVisible}"/>

Or using dataTransform to set width to 0 and don't ocuppy space on the UI

In the View

<View dataCollection="$.collectionOfStuff" dataTransform="transformModel">
    <Label>Always visible</Label>
    <Label width="{width}">Only show when {isVisible} is true</Label>
    <Label>Another label always visible</Label>
</View>

In the controller

function transformModel(model){
    var data = model.toJSON();
    data.width = !data.isVisible ? 0 : 50;
    return data;
}

Appcelerator - Hide UI element in list generated by dataCollection

1 Answers