Question

我正在使用Alloy和Alloy Collections在应用中生成视图列表。我需要能够根据模型对象中的数据隐藏每个视图中的子元素。

例如，我有一个合金视图：

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

假设$.collectionOfStuff中的模型具有isVisible属性，我希望能够基于该值隐藏第二个标签。在Label上设置visible属性很容易，但这只是隐藏了元素并且没有回收空间 - 这意味着第一个和第三个标签之间存在间隙。我需要第二个标签来停止占用空间。

我尝试使用数据绑定语法将hidden类添加到元素（<Label class="{hiddenWhenNotVisible}">），但Alloy似乎没有解析类属性中的数据绑定标记。

这似乎不应该如此困难，所以我希望我错过了一些明显的东西。

Answer 1

您可以像这样使用visible属性：

<Label visible="{isVisible}"/>

或者使用dataTransform将宽度设置为0并且不要在UI上显示空间

在视图中

<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>

在控制器中

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

Appcelerator - 隐藏由dataCollection生成的列表中的UI元素

1 个答案: