Nativescript ListView刷新

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 （例如，

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