时间戳

首页 > 解决方案 > 本机脚本获取和显示

fetch - 本机脚本获取和显示

问题描述

我需要使用 nativescript 进行最简单的获取和显示的示例。如果有人有一些 github repo，我将不胜感激。谢谢 实际上，我想读取一个 JSON 并在本机脚本的列表中显示数据。

标签： fetchnativescript

解决方案

这个 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>

当然，上面是一个非常简化的直接作为字符串数组接收的值的示例。有关数据绑定的更多选项，请查看此文档文章

推荐阅读