NativeScriptでボタンの水平リストを動的に作成する方法は？

Question

私はネイティブスクリプトの使用を開始しましたが、MVVMのコンセプト、特にバインドには多少の苦労があります。私はTypeScriptで動作するようにセットアップ環境を持っています。

私はボタンの水平リストを作成する必要があるホームページを持っています。私は表示するために必要なものを、ボタンしかし、最初に私は、サーバーからフェッチする必要があります：私は気付か

<AbsoluteLayout> 
    <maps:mapView 
     left="0" 
     top="0" 
     width="100%" 
     height="100%" 
     latitude="{{ map.latitude }}" 
     longitude="{{ map.longitude }}" 
     zoom="{{ map.zoom }}" 
     mapReady="onMapReady" 
     cameraChanged="onMapCameraChanged"/> 

    <ScrollView 
     left="0" 
     top="0" 
     width="100%" 
     orientation="horizontal"> 

     <Repeater items="{{ categories }}"> 
      <Repeater.itemsLayout> 
       <StackLayout orientation="horizontal" /> 
      </Repeater.itemsLayout> 
      <Repeater.itemTemplate> 
       <Button text="{{ getName() }}"/> 
      </Repeater.itemTemplate> 
     </Repeater> 
    </ScrollView> 
</AbsoluteLayout> 

シング：

let page: Page; 
let viewModel = new MainViewModel(); 
let fetchCategoriesUseCase: FetchCategoriesUseCase = new FetchCategoriesUseCase(new InMemoryCategoriesRepository()); 

export function navigatingTo(args: EventData) { 
    page = <Page>args.object;  
    page.bindingContext = viewModel; 
} 

export function onMapReady() { 
    console.log("Map is ready"); 
    fetchCategoriesUseCase.handle(null).then((result: IFetchCategoriesResult) => { 
     viewModel.categories = result.getCategories(); 
    }); 
} 

とmain.xmlでMainViewModel.ts

export class MainViewModel extends Observable { 
    private mMap: Observable; 
    private mCategories: Category[]; 

    public constructor() { 
     super();  

     this.mMap = fromObject({ 
      latitude: 42.442574, 
      longitude: 19.268646, 
      zoom: 13 
     }); 
    } 

    get map(): Observable { 
     return this.mMap; 
    } 

    get categories(): Category[] { 
     return this.mCategories; 
    } 

    set categories(categories: Category[]) { 
     this.mCategories = categories; 
    } 
} 

私はこれを持っています私のアプリケーションを起動すると、最初はリストが空（期待どおり）ですが、onMapReady()のボタンをリポジトリに要求してからviewModel.categories = result.getCategories()、リストはまだ空です。

ここでXMLで何かを変更して保存すると、NativeScript CLIはその変更をデバイスと同期させ、ページを再作成せずにビューを再作成し、MainViewModelオブジェクトへの参照が失われず、 categoriesフィールドで実際に表示されますので、問題は、プロパティーcategoriesを設定すると、リスナーはこの変更について通知されないため、ビューは空でないリストを表示するように更新されません。 ..私はそれを間違ってバインドすると思います...

どうすればこの問題を解決できますか？私はObservableArrayと関係があると思いますが、どのように実装すればよいかわかりません。

Answer 1

set categories(categories: Category[]) { 
    this.mCategories = categories; 
    this.notifyPropertyChange('categories', categories) 
}