Question

我正在寻找从API创建视图的最佳方法。简单的Json响应如下所示:(来自http GET）

"entries": [
{
"id": 1,
"title": "title",
"address_line_1": "23 Shee",
"address_line_2": "",
"city": "Richmond",
"county": "Surrey",
"postcode": "TW 1BN",
"tel": "",
"map_latitude": "5.46107",
"map_longitude": "-0.0002"
},
{
"id": 2,
"title": "title",
"address_line_1": "House",
"address_line_2": "",
"city": "Oxford",
"county": "Oxfordshire",
"postcode": "O 1JD",
"tel": "",
"map_latitude": "5.75263",
"map_longitude": "-1.77286"
}
]

简单的观点：

<ScrollView row="1" verticalAlignment="top" class="scrollview">

        <StackLayout class="item">

            <Label class="welcome" text="Pick a studio"></Label>


            <!-- This gridlayout should act as templete for every entry -->
            <GridLayout class="grid" rows="*,*" columns="*,70" tap="{{ loadPage }}" data-id="1">
                <StackLayout row="0" col="0">
                    <Label class="primary" text="{{ title }}"></Label>
                    <Label class="second" text="{{ city }}"></Label>
                </StackLayout>
                <Label row="0" col="1" class="fa next" text="&#xf0da;" verticalAlignment="middle"></Label>
            </GridLayout>
            <Label class="break"></Label>
            <!-- This gridlayout should act as templete for every entry END -->

        </StackLayout>
  </ScrollView>

所以，我正在寻找的是一种转换Json响应的方法，并将其作为GridLayout class =“grid”系列追加

我发现使用Listview很容易，因为绑定的数据会以简单的方式显示：

// list-test.html
<ListView [items]="myItems" (itemTap)="onItemTap($event)">
    <ng-template let-item="item" let-i="index" let-odd="odd" let-even="even">
        <StackLayout [class.odd]="odd" [class.even]="even">
            <Label [text]='"index: " + i'></Label>
            <Label [text]='"[" + item.id +"] " + item.name'></Label>
        </StackLayout>
    </ng-template>
</ListView>

感谢您的任何提示。

Answer 1

事实上，Listview就是一个答案。或者，出于简单目的，使用Repeater。

简单数据：

man-pages-posix

XML部分：

model.items = [
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
    ]

从Nativescript中的http GET响应创建视图

1 个答案: