Question

我需要不断更新我的ListView，但由于某种原因，我还无法识别，我还没有成功。

dash.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。例如 page.js

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

page.xml

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

现在请注意，使用推送进行数组时，使用此方法仍然可以不更新列表视图项。原因 - 列表本身是Observable，但只有在更改整个数组时才会触发属性更改，并且在使用arr.push时不会触发。

为了在向阵列添加新项目时更新列表视图项，您需要使用ObservableArray e.g。

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文件。

Nativescript ListView刷新

1 个答案: