本机脚本获取和显示

利斯塔普

我需要使用 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章