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

Posted 2023-02-26

【中文标题】Appcelerator - 在 dataCollection 生成的列表中隐藏 UI 元素

【英文标题】：Appcelerator - Hide UI element in list generated by dataCollection

【发布时间】：2017-04-14 14:12:36

【问题描述】：

我正在使用 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 似乎无法解析类属性中的数据绑定标签。

这似乎不应该那么困难，所以我希望我遗漏了一些明显的东西。

【问题讨论】：

我认为您没有遗漏任何东西。我不相信数据绑定支持你正在尝试做的事情。

【参考方案1】：

你可以像这样使用可见属性：

<Label visible="isVisible"/>

或者使用 dataTransform 将宽度设置为 0 并且不占用 UI 上的空间

在视图中

<View dataCollection="$.collectionOfStuff" dataTransform="transformModel">
    <Label>Always visible</Label>
    <Label >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;

【讨论】：

这很好，但不太奏效。在元素上设置visible 属性可以将其对用户隐藏，但会保留元素在可见时占用的空间。

alloy 是有限的，尽管您可以在模型中添加另一个属性“width”，具体取决于您指定 width = 0 或显示时的大小，如