Bound variable not updating in function in Nativescript (JavaScript)


#1

##Context

I have a page where a listview can be toggled visible/hidden using a function called when tapping a button.

The listview element has the visibility attribute set to

{{ showFixtures ? 'visible' : 'collapsed' }}

When I initially bind the page, the showFixtures variable is set to false and the listview is hidden. When reversed, the listview is shown. This proves that the showFixtures variable is initially bound.

When the button is tapped, the showFixtures variable is supposed to be toggled between true and false. I can tap the button and call the function and see that the page variables have changed, however the listview element does not become visible/hidden (depending on context).

##Code

page.xml

<Page loaded="loaded">
    <!-- ... -->
<Label text="Toggle Fixtures" ontap="toggleFixtures"  />
    <ListView items="{{ fixturesList }}" visibility="{{ showFixtures ? 'visible' : 'collapsed' }}">
        <ListView.item>
            <GridLayout class="list-matches-ko" rows="30" columns="auto,*">
                <Label row="0" col="0" class="list-matches-ko-date" text="{{ koLabelDate }}" />
                <Label row="0" col="1" class="list-matches-ko-time" text="{{ koLabelTime }}" />
            </GridLayout>
        </ListView.item>
    </ListView>
    <!-- ... -->
</Page>

page.js

var observableModule = require("data/observable");
var pageData = new observableModule.Observable;

exports.loaded = loaded;
function loaded(args){
    page = args.object;
    pageData.showFixtures = false;
    page.bindingContext = pageData;
}

//...

exports.toggleFixtures = toggleFixtures;
function toggleFixtures(args){
    pageData.showFixtures = pageData.showFixtures ? false : true;
    console.log(args.object.bindingContext.showFixtures);
    console.log(page.bindingContext.showFixtures);
    console.log(pageData.showFixtures);
}

##Output

When the button is tapped three times, the output on the console is:

JS: true
JS: true
JS: true
JS: false
JS: false
JS: false
JS: true
JS: true
JS: true
JS: false
JS: false
JS: false

##Question

How can I make the listView element visible/hidden with this function by using the bound variable, and why isn’t it working the way it is now?


#2

You need to do:

either:

var pageData = new observableModule.Observable({showFixtures: false});

This will setup the observable to automatically monitor changes on the showFixture variable; so any future changes will be tracked.

or

function toggleFixtures(args){
pageData.set(‘showFixtures’, !pageData.showFixtures);
}

You can set the data, which triggers any listeners looking for any data changes.
You can also use both techniques at the same time.

Nathanael A.