NativeScript: ListView unable to observe its bindingContext properly

Platform: iOS TNS: 2.3.0 Git repo: https://github.com/NordlingArt/tns-issue-listview

If I make a checklist to a ListView, I need to observe an object property called selected, which is set to false as default, so I can either show or hide the checkbox.

In the Git repo, I have set up a ListView and a Repeater. Both use the same items observableArray and they both interact with each other. However, only Repeater will update its UI properly when selecting other options than the initially selected one.

It seems like the ListView can only observe the value if the condition is true from the beginning. See the selected property below:

var options = new ObservableArray(
  new Observable({ index: 0, text: "Option 1", selected: true }),
  new Observable({ index: 1, text: "Option 2", selected: false }),
  new Observable({ index: 2, text: "Option 3", selected: false }),
  new Observable({ index: 3, text: "Option 4", selected: false })
);

Condition from the XML:

<StackLayout col="1" class="checkbox" visibility="{{ selected ? 'visible' : 'collapsed' }}" />

I strongly suggest you take a look at the Git repo for a full demo of the issue.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 19 (6 by maintainers)

Most upvoted comments

@smarza I am refreshing the listview after changing the variable value (I have a boolean variable that determines the visibility of the template) and this works for me on ios.

nmongiya on Oct 26, 2017

@NickIliev - I have found the issue. It’s pretty simple. In the XML:

This will not work visibility="{{ selected ? 'visible' : 'collapsed' }}"

But this will opacity="{{ selected ? 1 : 0 }}"

Such a simple fix and it’s been taking me months to realize 😳 Using this workaround, it might however create other issues. Like if, for instance, I’m already using the opacity property for something else. Luckily this is not the case for me, but maybe to others.

NordlingDev on Nov 24, 2016