Nativescript: Apply visibility via binding fails [Android]

[manijak]

I am trying to show/hide a label over a ListView based on the length property of the items-binding. This works just fine on iOS, but not on Android. The Label is never hidden. The 'items' binding is populated in the loaded event of the view/page.

<GridLayout>
    <Label text="List is empty..." visibility="{{ items.length === 0 ? 'visible' : 'collapsed' }}"/>
    <ListView items="{{ items }}">
        <ListView.itemTemplate>
            <StackLayout>
                ...
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
</GridLayout>

CLI: 1.6.1
Cross-platform modules: 1.6.2
Runtime(s): ios 1.6.0, android 1.6.3

[hshristov]

Hi @manijak,

Could you try to first specify the sourceProperty and let me know if it works?
https://docs.nativescript.org/core-concepts/bindings#using-expressions-for-bindings

[manijak]

@hshristov
Ok so I tried this with the same label as above:

<Label text="{{ items.length, items.length + ' some static text' }}" visibility="{{ items.length === 0 ? 'visible' : 'collapsed' }}"/>

The result was:
"29 some static text"

[enchev]

Hey @manijak,

I've just tested your case using latest bits from our master and it seems that the issue is fixed. Here is what I've tried:

<Page loaded="loaded">
  <StackLayout>
     <Button text="Add/Remove item" tap="tap" />
     <Label text="List is empty..." visibility="{{ items.length, items.length === 0 ? 'visible' : 'collapsed' }}"/>
  </StackLayout>
</Page>

var observable = require("data/observable");
var observableArray = require("data/observable-array");

var context = { items: new observableArray.ObservableArray() };

exports.loaded = function (args) {
    var page = args.object;
    page.bindingContext = context;
}

exports.tap = function (args) {
    if (context.items.length === 0) {
      context.items.push(new observable.Observable());
    }
    else {
      context.items.length = 0;
    }
}

[manijak]

@enchev : sorry to have waisted your time guys. It does work indeed.

I had the following:

<Label text="List is empty..." visibility="{{ items.length === 0 ? 'visible' : 'collapsed' }}"/>

It is supposed to be:

<Label text="List is empty..." visibility="{{ items.length, items.length === 0 ? 'visible' : 'collapsed' }}"/>

The fact that the first example worked on iOS confused me.
Thanks again.

[calebeaires]

@manijak Thank you for your example. But I don't understand why repeat the variable fix the problem.

[manijak]

@calebeaires Yeah it took me some time to figure it out also. This is how expressions in bindings work. The first parameter is the source property, the one that's going to be listened to for changes. And the other one is the expression itself.

[calebeaires]

@manijak I was thinking about NativeScript and Angular 2: maybe this couple makes easier to overcame problems like that.

[nmongiya]

@manijak I tried that but is says unexpected token ','. I am using typescript and angular.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.