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模型和數據綁定 。 例如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>

現在請注意，使用這種方法時，對於數組使用push時，您仍將無法更新列表視圖項。 原因-列表本身是可觀察的，但僅當更改整個數組時才會觸發屬性更改，並且在使用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數組的演示應用程序-該應用程序是用TypeScript編寫的-只需執行tns run android然后在編譯后便會創建相應的JavaScript文件。