如何動態創建NativeScript中的水平按鈕列表？

我已經開始使用本機腳本，並且與MVVM概念有點糾結，特別是綁定。我有安裝環境來使用TypeScript。如何動態創建NativeScript中的水平按鈕列表？

我有一個主頁，我需要創建一個水平的按鈕列表。不過，首先我需要從服務器獲取我需要什麼按鈕顯示：

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(); 
    }); 
}

和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; 
    } 
}

在main.xml我有這樣的：

<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>

件事，我注意到是，當我開始我的應用程序，最初列表是空的（如預期），但在我問倉庫按鈕onMapReady()功能和呼籲viewModel.categories = result.getCategories()，該列表仍然是空的。

現在，如果我在XML中更改某些內容並保存，NativeScript CLI會將該更改與設備同步，並且不會重新創建頁面，而只是重新創建視圖，然後由於參考MainViewModel對象沒有丟失，並且它包含這些按鈕在categories字段中，它實際上會顯示它們......因此，當我看到它的問題是，當我設置屬性categories時，偵聽器不會收到有關此更改的通知，因此視圖不會更新以顯示非空列表按鈕。 ..我想我把它弄錯了......

我該如何解決這個問題？我認爲這與ObservableArray有關，但我不確定它應該如何實現？

來源

2017-07-06 clzola

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

來源

2017-07-10 11:55:10

請詳細說明你的答案，使得OP能夠理解它的目的 – AGE

如何動態創建NativeScript中的水平按鈕列表？

回答

相關問題