javascript - Nativescript - 具有嵌套数据的中继器

Question

我有一些来自外部 API 的数据。它返回嵌套数组，如下所示:

var myData = [
    {
        "id": 30,
        "type": "Product",
        "name": "Product Name",
        "children": {
            "661031278126991": {
                "id": 45,
                "type": "Releases",
                "name": "2019",
                "parent": 30,
                "children": {
                    "6611311403631192": {
                        "id": 12,
                        "type": "Features",
                        "name": "Clients",
                        "parent": 80,
                        "children": {
                            "66103580432771": {
                                "id": 80,
                                "type": "Tasks",
                                "name": "List",
                                "parent": 12
                            },
                            "66103144161527": {
                                "id": 45,
                                "type": "Tasks",
                                "name": "List B",
                                "parent": 12
                            }
                        }
                    }
                }
            }
        }
    }
];

问题是我有多个“任务”，例如，现在我陷入困境。我什至不知道是否可以根据这些数据创建 View 。

下面，我粘贴了一些肯定不会工作的 XML 代码，但它将有助于解释我想要呈现什么样的布局。我只是希望 Repeater 能够以某种方式呈现它。谢谢您的建议。

<Repeater items="{{ myData }}">
                    <Repeater.itemTemplate>
                        <StackLayout>
                            <StackLayout class="sep">
                                <Label text="{{ type }}" class="item"></Label>
                            </StackLayout>
                            <StackLayout class="sep">
                                <Label text="{{ children.name }}" class="item"></Label>
                                <StackLayout class="sep">
                                    <Label text="{{ children.children.name }}" class="item"></Label>
                                    <StackLayout class="sep">
                                        <Label text="{{ children.children.children.name }}" ></Label>
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                        </StackLayout>
                    </Repeater.itemTemplate>
                </Repeater>

Answer 1

Repeater 不适用于对象，因此您必须循环遍历 children 对象并将键值对转换为数组。

然后，您必须构建一个自定义组件，将其自身包含在 Repeater 中，以便所有子元素都可以依次呈现。

父组件

<ScrollView>
  <Repeater items="{{ myData }}">
   <Repeater.itemTemplate>
     <comps:child-component></comps:child-component>
   </Repeater.itemTemplate>
 </Repeater>

子组件

<StackLayout xmlns:comps="components">
    <Label text="{{ name }}" class="m-y-10 m-x-10 h3"></Label>
    <Repeater items="{{ children }}">
        <Repeater.itemTemplate>
            <comps:child-component></comps:child-component>
        </Repeater.itemTemplate>
    </Repeater>
</StackLayout>

这是一个Playground Sample .

注意:如果您计划渲染 100 个此类数组，则必须考虑采用不同的方法以避免性能下降。也许您可以使用 ListView 加载第一级项目，然后点击在下一个屏幕中加载第二级项目。