javascript - 如果绑定(bind)到特定列表项的数组为空，则在 ListView 中显示该特定列表项

Question

我有一个绑定(bind)到集合的 ListView:

    <ListView  row="1" items="{{ measurements }}" id="measurement-list" loaded="" itemTap="">
        <ListView.itemTemplate>
            <GridLayout columns="5,*,10,*" rows="*, *" class="measurement-item">
            <Label class="{{'severity-' + TrendArrow}}" col="0" rowSpan="2"  text="" />
            <Label class="measurement-value" col="1" text="{{ValueInMgPerDl}}" />
            <Label class="measurement-uom"   col="1" row="1" text="mg/dl"/>
            <Label class="measurement-time"  col="3" text="{{Timestamp}}"/>                
            </GridLayout>
        </ListView.itemTemplate> 
    </ListView>  

如果 {{connections}} 长度为 0，我想显示以下内容

<Label col="1" text="No Measuremenets Available" textWrap="false" />

其他方面我想显示上面的 item.Template 。我怎样才能做到这一点？到目前为止我所尝试的一切都失败了。 View 模型有一个 bool hasMeasurement 属性，但当我尝试在 XML 中执行以下操作时失败，有什么指导吗？ UI 最终仅在每个表格项中显示 [object object ]。

<ListView  row="1" items="{{ measurements }}" id="measurement-list">
    <ListView.itemTemplate>
        <GridLayout columns="5,*,10,*" rows="*, *" class="measurement-item" visibility="{{ hasMeasurement ? 'visible' : 'collapsed' }}">
        <Label class="{{'severity-' + TrendArrow}}" col="0" rowSpan="2"  text="" />
        <Label class="measurement-value" col="1" text="{{ValueInMgPerDl}}" />
        <Label class="measurement-uom"   col="1" row="1" text="mg/dl"/>
        <Label class="measurement-time"  col="3" text="{{Timestamp}}"/>                
        </GridLayout>
        <GridLayout rows="" columns="" visibility="{{ hasMeasurement ? 'visible' : 'collapsed' }}" >
            <Label text="No Measurements Available" textWrap="false" />                    
        </GridLayout>
    </ListView.itemTemplate> 
</ListView> 

Answer 1

您可以尝试此操作，具体取决于主容器是什么，在本例中是 GridLayout:

<Label row="1" text="No Measuremenets Available" textWrap="false" visibility="{{ measurements.length, measurements.length === 0 ? 'visible' : 'collapsed' }}" />

<ListView  row="1" items="{{ measurements }}" id="measurement-list" loaded="" itemTap="" visibility="{{ measurements.length, measurements.length === 0 ? 'collapsed' : 'visible' }}" >
    <ListView.itemTemplate>
        <GridLayout columns="5,*,10,*" rows="*, *" class="measurement-item">
        <Label class="{{'severity-' + TrendArrow}}" col="0" rowSpan="2"  text="" />
        <Label class="measurement-value" col="1" text="{{ValueInMgPerDl}}" />
        <Label class="measurement-uom"   col="1" row="1" text="mg/dl"/>
        <Label class="measurement-time"  col="3" text="{{Timestamp}}"/>                
        </GridLayout>
    </ListView.itemTemplate> 
</ListView>  

请注意标签和 ListView 中的以下行，以及它们如何“反转”:

visibility="{{ measurements.length, measurements.length === 0 ? 'visible' : 'collapsed' }}"