nativescript - 如何使用和更新 NativeScript ListView

Question

我试图弄清楚如何使用 NativeScript 的 ListView，但我不知道如何使用。我还没有找到任何好的教程，确实需要帮助。我需要能够在 NativeScript 中显示和更新 ListView(从中添加和减去项目)。提前致谢!

Answer 1

你几乎可以找到关于ListView的所有内容here但我将演示我在应用程序中使用的 ListView 实践。我正在使用 MVC 结构，所以我们将有 page.xml , page.js和page-viewmodel.js 。在 page.xml ，我们希望有一个像这样的 ListView :

<Page>
 <ListView items="{{ myItems }}" loadMoreItems="loadMore">
    <ListView.itemTemplate>
       <Label text="{{ message }}" textWrap="true" />
    </ListView.itemTemplate>
 </ListView>
</Page>

<ListView.itemTemplate>是您为数据数组项定义原型(prototype)的地方。您可以使用普通数组，但我建议使用名为 ObservableArray 的内置类以便稍后以编程方式更改任何项目或任何属性。

在模型中，即 page-viewmodel.ts ，我们有:

var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;

public class PageViewModel extends Observable {
    private _myItems = new ObservableArray<MyItem>()

    get myItems(): {
        return this._myItems
    }

    public loadItems() {
        var dataArray = ["Red", "Blue", "Green"];
        for (var i in dataArray) {
            var item = MyItem(dataArray[i])
            this._myItems.push(item);
        }
    }
}
var pageViewModel = new PageViewModel();


public class MyItem extends Observable {
    public message: String;

    constructor(value) {
        this.message = value;
    }
}

最后，在 Controller 中 page.ts :

import {pageViewModel} from "./page-viewmodel"

exports function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = pageViewModel
}

exports function loadMore(args) {
    pageViewModel.loadItems();
}

总之，您在 XML 中定义了 ListView 及其原型(prototype)。之后，viewmodel (这是一个 Observable 对象)是处理数据的地方(添加项目、删除项目、从后端加载项目等)。最后，导入 viewmodel到 Controller (page.js)并绑定(bind)到 page.bindingContext这样XML可以接收数据

P/S:我正在用 TypeScript 编写此内容。在Javascript中，实现基本相同，只是语法上有一点不同。例如，这里是 page.js看起来像:

var pageViewModel = require("./page-viewmodel");

function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = pageViewModel
}
exports.pageLoaded = pageLoaded;