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的内置类，以便以后以编程方式更改任何项目或任何属性。

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

1 个答案: