我需要使用 nativescript 的最简单的获取和显示示例。如果有人有一些 github 存储库,我将不胜感激。谢谢 实际上,我想读取一个 JSON 并在本机脚本的列表中显示数据。
这个 Playground 中的基本示例- NativeScript 的主要文档中也有很多关于获取和数据绑定的示例
基本上,您使用创建视图模型Observable
并将其绑定到 XML 视图(以上所有内容都与 NativeScript Core 有关 - 请参阅NativeScript Angula r)
import { EventData, Observable, fromObject } from 'tns-core-modules/data/observable';
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout';
// Event handler for Page "pageLoaded" event attached in home-page.xml
export function pageLoaded(args: EventData) {
let page = <StackLayout>args.object;
let viewModel = new Observable();
viewModel.set("items", [])
fetch("https://httpbin.org/json")
.then((response) => response.json())
.then((res) => {
// console.log(res.slideshow.slides[1].items);
viewModel.set("items", res.slideshow.slides[1].items);
}).catch((err) => {
});
page.bindingContext = viewModel;
}
和 ListView 在 XML 中呈现列表
<ListView class="list-group" items="{{ items }}" itemTap="{{ onItemTap }}" style="height:1250px">
<ListView.itemTemplate>
<FlexboxLayout flexDirection="row" class="list-group-item">
<Label text="{{ $value }}" />
</FlexboxLayout>
</ListView.itemTemplate>
</ListView>
当然,上面是一个非常简单的例子,直接接收作为字符串数组的值。有关数据绑定的更多选项,请查看此文档文章
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句