Appcelerator - Hide UI-Element in der Liste von DataCollection generiert

Question

Ich verwende Alloy und Alloy Collections, um eine Liste von Ansichten in einer App zu generieren. Ich muss in der Lage sein, untergeordnete Elemente innerhalb jeder Ansicht basierend auf Daten innerhalb des Modellobjekts zu verbergen.

Zum Beispiel habe ich eine eine Legierung Ansicht:

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

die Modelle in $.collectionOfStuff Unter der Annahme hat eine isVisible Eigenschaft, würde Ich mag Lage sein, das zweite Etikett auf diesem Wert basiert zu verbergen. Das Festlegen der visible -Eigenschaft auf dem Label ist einfach, aber das verbirgt nur das Element und beansprucht den Platz nicht zurück - es gibt also eine Lücke zwischen dem ersten und dem dritten Label. Ich brauche das zweite Etikett, um nicht mehr Platz zu haben.

Ich habe versucht, die Datenbindungssyntax zu verwenden, um eine Klasse zu dem Element hinzuzufügen() aber Legierung scheint Datenbindung Tags in Klassenattribute nicht aufzulösen.

Das scheint nicht so schwer zu sein, also hoffe ich, dass mir etwas offensichtlich fehlt.

Answer 1

Sie können die sichtbare Eigenschaft wie so verwenden:

<Label visible="{isVisible}"/> 

Oder mit datatransform auf 0 Breite zu setzen und nicht ocuppy Platz auf dem UI

In der Ansicht

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

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