javascript - Nativescript ListView 刷新

Question

我需要不断更新我的 ListView，但由于某种原因，我还不能确定，我没有成功这样做。

破折号.xml

<ListView id="pilotList" items="{{ activeList }}">
    <ListView.itemTemplate>
       <GridLayout columns="*,*2,*">
            <Label text="{{ listNick }}" col="1"  class="listNick" />
            <Label text="{{ listDistance }}" col="2" class="listDistance" />
       </GridLayout>
    </ListView.itemTemplate>
</ListView>

dash.js(我在这里只提取相关部分):

var observable = require("data/observable");
var pageModule = require("ui/page");

var activePilots = []; //this is the array with the contents


exports.pageLoaded = function(args) {
    page = args.object;  
    pilotList = page.getViewById("pilotList");  
    page.bindingContext = { activeList:activePilots };
}

稍后在代码中(每次位置更改时)，我更新 activePilots 数组:

activePilots.push({listNick:fbMi, listDistance:result.value[uid]["uid"] })

到目前为止，一切正常，正如我在 console.log(JSON.stringify(activePilots)) 中看到的那样。

但是，ListView 永远不会更新，甚至强制

pilotList.refresh();

对我做错了什么有什么想法吗？谢谢，亚历克斯

Answer 1

需要解决的事情很少。为了更新 UI 中的值，您需要使用 Observable 模型和 data binding .例如页面.js

var observable = require("data/observable");
var viewModel = new observable.Observable();
viewModel.set("activeList", [1,2,3]);

页面.xml

<ListView items="{{ activeList }}">
    <ListView.itemTemplate>
       <GridLayout>
            <Label text="{{ $value}}"  />
       </GridLayout>
    </ListView.itemTemplate>
</ListView>

现在请注意，使用这种方法，您仍然无法在对数组使用push 时更新您的 ListView 项。原因 - 列表本身是可观察的，但只有当您更改整个数组时才会触发属性更改，而在使用 arr.push 时不会触发。

要在向数组添加新项目时能够更新 ListView 项目，您需要使用 ObservableArray例如

var ObservableArray = require("data/observable-array").ObservableArray;
var viewModel = new observable.Observable();
viewModel.set("activeList", new ObservableArray ([1,2,3]));

现在数组是可观察的，这意味着您可以动态添加新项目，它们将呈现在您的 ListView 中。可以找到使用 Observable 和 Observable 数组的演示应用程序 here - 应用程序是用 TypeScript 编写的 - 只需执行 tns run android 并在转换后创建相应的 JavaScript 文件。