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

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属性很容易，但这只是隐藏了元素，并没有回收空间 - 意味着第一个和第三个标签之间存在间隙。我需要第二个标签停止占用空间。

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

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

Answer 1

可以使用Visible属性，象这样：

<Label visible="{isVisible}"/> 

或者使用的DataTransform设置宽度为0，不ocuppy空间上的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; 
}