How to set up visibility binding in JavaScript

[Marc]

Hello,

I try to define some databinding in JavaScript Code, like I usually did in XML before:

<ActivityIndicator busy="{{ isLoading }}" visibility={{ isLoading ? 'visible' : 'collapse' }} />

 

Now it is necessary for me to define this in JavaScript, as I need to create the UI dynamically in JavaScript.

I tried to define the busy binding and visibility binding like this:

activityIndicator.bind({               //works
   sourceProperty: "isLoading",
   targetProperty: "busy",
   twoWay: true
}, myObservable);

activityIndicator.bind({               //does NOT work
   sourceProperty: "isLoading" ? 'visible' : 'collapse',
   targetProperty: "visibility",
   twoWay: true
}, myObservable);

 

The busy binding works as expected, but not the visibility-binding. When the ActivityIndicator is not busy, it should not consume any space, but as you can see in the gif (please have a look at the attachment), there is some 'white space' even when the Indicator is not busy.

 

I tried this with NativeScript 2.3 and 2.4. So it seems that I am generally making a mistake.

 

Can you tell me what I am doing wrong?

 

Best regards

[Nick Iliev]

Hi Marc,

One of the reasons behind your visibility not to work as expected is the usage of collapse instead of collapsed. The first syntax was deprecated some time ago in favour of the CSS syntax collapsed. Also no need to use the source and target property to bind to your visibility. Apart from that I also noticed that your visibility is not wrapped in quotation marks.
e.g.
page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout class="p-20" backgroundColor="gray" >
    <ActivityIndicator busy="{{ isLoading }}" visibility="{{ isLoading ? 'visible' : 'collapsed' }}"  backgroundColor="blue" color="yellow"/>
    <Button text="Show/Hide act.bar" tap="onTap" />
  </StackLayout>
</Page>

page.ts

let vm = new Observable();
vm.set("isLoading", false);

export function navigatingTo(args: EventData) {
    let page = <Page>args.object;

    page.bindingContext = vm;
}

export function onTap() {
    vm.set("isLoading", !vm.get("isLoading"));
}

Here you can find a full working example for binding to visibility.

Regards,
Nikolay Iliev
Telerik by Progress