Nativescript: Binding visiblity in XML

[HunterJS-bit]

Tell us about the problem

Hello guys I have a newbiew question Im trying to created button like accordian,
when clicking on it is should toggle visibility of the content bellow
Here is my Code:

Button text=“click” tap=“openAccordian”>
StackLayout visibility="{{ toggle ? ‘visible’ : ‘collapse’ }}">
/StackLayout>

var toggle = true;
exports.openAccordian = function(){
console.log(“Opening accordian”);
var tr = pageData.get(‘toggle’);
pageData.set(‘toggle’,!tr);
}

But seems like the expression in StackLayout is not working at all ???
NOTE:
I want to do this in plain Javascript Im not using Angular

Which platform(s) does your issue occur on?

iOS/Android/Both

### Please provide the following version numbers that your issue occurs with:
- CLI: 3.2.1
- Cross-platform modules: (check the 'version' attribute in the
`node_modules/tns-core-modules/package.json`
"dependencies": {
    "moment": "^2.19.1",
    "nativescript-drop-down": "^3.1.3",
    "nativescript-pro-ui": "^3.1.4",
    "nativescript-theme-core": "~1.0.4",
    "tns-core-modules": "3.2.0"
  },
  "devDependencies": {
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.5.1",
    "typescript": "^2.5.3"
  }

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

[NickIliev]

@markomiljkovic thank you for your interest in NativeScript.
please notice that this repository is for logging issues, bugs, and feature requests.
For how-to related questions, please use the community support channels like discourse.nativescript.org or SO.

Regarding your question:
I have created this test project demonstrating toggling the visibility for StackLayout.
However, keep in mind that you might need to provide a toggle property for your item model if you are trying to change the visibility of an item inside a ListView or RadListView. If this is the case see this comment for instructions on how to handle it.

[HunterJS-bit]

Hi thankx for replying in sucha short time,
I downloaded your sources but it is not working can you test again your example???

[NickIliev]

@markomiljkovic let me know on what platform (iOS or Android) and on what device you are testing?

[HunterJS-bit]

Im testing on Linux mint Debian , platform is Android, device: Android Studio emulator -- Nexus_5
seems like tap events are not recognized from example code you provided and it seems like binding is not working.
Can you verify that its working on your side ??

[HunterJS-bit]

tns version 3.2.1

[NickIliev]

@markomiljkovic yes the test applicaiton works on m side on both iOS and Android (tested on API19, API23 and API26) - here is a demonstration video

[neddinn]

I'm having a similar issue. I upgraded my tns-core-modules to latest (3.2.0), tns-ios , and also switched from nativescript-teleric-ui to nativescript-pro-ui, and now I noticed that the condition in a ternary operator isn't updating the UI after it changes. E.g I have
<Label text="{{condition ? 'Yes': 'No'}}" textWrap="true"></Label> &
<Label text="{{condition}}" textWrap="true"></Label>
When the condition becomes true, the second label text shows true, but the first label still shows No.

[NickIliev]

@neddinn please if possible provide a full demo project demonstrating the issue

[neddinn]

I figured out the problem. This happens when using observableModule.fromObject or passing an object to the observable constructor.

[NickIliev]

@neddinn keep in mind that passing an object to the observable constructor is no longer supported in NativeScript 3.x.x. use fromObject or fromObjectRecursive to create an Observable from object.

[HunterJS-bit]

Yes seems that was the problem with, thanx guys
awesome support here :)

[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.