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