Question

我已经开始使用本机脚本了，我对MVVM概念有点困难，尤其是绑定。我有使用TypeScript的设置环境。

我有一个HomePage，我需要创建一个水平的按钮列表。但是，首先我需要从服务器提取我需要显示的按钮：

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

在{{ 1}}我有这个：

main.xml

我注意到的是，当我启动我的应用程序时，最初列表是空的（正如预期的那样），但在我向{{{{{{ 1}}函数并调用<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>，列表仍为空。

现在，如果我在XML中更改并保存，那么NativeScript CLI会将该更改与设备同步，它不会重新创建页面，只是重新创建视图，然后引用onMapReady()对象是没有丢失，它包含viewModel.categories = result.getCategories()字段中的这些按钮，它实际上会显示它们......所以我看到它的问题是，当我设置属性MainViewModel时，听众不会收到有关此更改的通知，因此视图不会更新以显示非空的按钮列表...我想我绑错了...

如何解决这个问题？我认为它与ObservableArray有关，但我不确定它应该如何实现？

Answer 1

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

如何在NativeScript中动态创建水平按钮列表？

1 个答案: