Question

上下文

我有一个页面，可以使用点击按钮时调用的函数切换listview可见/隐藏。

listview元素的visibility属性设置为

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

当我最初绑定页面时，showFixtures变量设置为false，listview被隐藏。反转时，会显示listview。这证明showFixtures变量最初是绑定的。

点击按钮时，showFixtures变量应在true和false之间切换。我可以点击按钮并调用该函数，看到页面变量已更改，但listview元素不会变为可见/隐藏（取决于上下文）。

代码

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);
}

输出

当按下按钮三次时，控制台上的输出为：

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

问题

如何通过使用绑定变量使listView元素与此函数可见/隐藏，为什么它不像现在那样工作？

Answer 1

由于你正在使用普通的nativescript observable尝试类似下面的内容

pagedata.set('showFixtures', YOUR TERNARY HERE)

绑定变量未在Nativescript（JavaScript）函数中更新

上下文

代码

输出

问题

1 个答案: