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