如何使用和更新 NativeScript ListView

Question

我正在尝试弄清楚如何使用 NativeScript 的 ListView，但我不知道如何使用。我还没有找到任何好的教程，真的需要帮助。我需要能够在 NativeScript 中显示和更新（添加和减去项目）ListView。提前致谢！

Answer 1

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

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

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

在模型中，即 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;
    }
}

最后，在控制器中 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 及其原型。之后，viewmodel（这是一个 Observable 对象）是您处理数据（添加项目、删除项目、从后端加载项目等）的地方。最后，将 viewmodel 导入到控制器 (page.js) 并绑定到 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;

如何使用和更新 NativeScript ListView

How to use and update NativeScript ListView

nativescript