Nativescript ListView Refresh

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））と同じようにすべてが機能しています。

しかし、リストビューは決して更新、でも私が間違っているのかの

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])); 

今のアレイを使用すると、その場で新しいアイテムを追加することができますし、彼らはあなたのリストビューでレンダリングされます意味観測可能です。 ObservableおよびObservable配列を使用したデモアプリケーションはhere - アプリケーションはTypeScriptで記述されています - tns run androidを実行するだけで、それぞれのJavaScriptファイルは翻訳後に作成されます。