使用 Aurelia 在前端将动态嵌套 JSON 显示为 Treeview答案

【问题标题】：Display dynamic nested JSON as Treeview on Front-end using Aurelia使用 Aurelia 在前端将动态嵌套 JSON 显示为 Treeview
【发布时间】：2021-05-08 22:23:19
【问题描述】：

如图所示，当前数组中有三个对象。这三个对象是“父母”，每个父母都有自己的“孩子”数组。这是棘手的部分；一个父元素也可以是另一个父元素的子元素，并且可以有自己的子元素。这部分是动态的，意味着用户将创建更多的“父”元素和更多的“子”元素。

我想使用 Aurelia 从前端的图像中显示此 JSON。我该怎么做？非常欢迎任何想法。

【问题讨论】：

请勿将代码发布为图片。请始终发布代码本身。
@AlexanderDobernig 只是我的意见，但截图在这种情况下是有效的。仅仅是因为红色注释清楚地表明了 OP 的层次结构问题。

标签： json typescript nested treeview aurelia

【解决方案1】：

亚历山大。您打算做什么 - 在 DOM 上渲染树结构 - 使用 Aurelia，可以通过一堆选项来实现。作为递归结构，以这种方式定义结构很方便；例如（请注意，该示例假定 Typescript 和引导程序）：

export interface TreeNode {
  name: string;
  children?: TreeNode[];
}

对于渲染，一个解决方案是定义一个包含“树”的自定义组件和一个自定义组件来渲染树的节点（以递归方式）。

所以，你可以这样做：

<require from="./tree"></require>
...
<tree source.bind="treeData"></tree>

treeData 可能是：

  treeData: TreeNodeModel[] = [
    { name: "node01", children: [{ name: "child011" }, { name: "child012" }, { name: "child013" }] },
    { name: "node02", children: [{ name: "child021" }, { name: "child022", children: [{ name: "child0221" }, { name: "child0222" }, { name: "child0223" }] }] },
    { name: "node03", children: [{ name: "child031" }] },
    { name: "node04", children: [{ name: "child041" }] },
    { name: "node05", children: [{ name: "child051" }] },
    { name: "node06", children: [{ name: "child061" }] },
    { name: "node07", children: [{ name: "child071" }] },

Tree 自定义组件的实现将是：

import { bindable } from "aurelia-framework";
import { TreeNodeModel } from "./model";

export class Tree {
  @bindable source: TreeNodeModel[];
}

Tree 自定义组件的视图：

<template>
  <require from="./node"></require>
  <div class="container">
    <div repeat.for="node of source">
      <node node.bind="node"></node>
    </div>
  </div>
</template>

节点自定义组件：

import { bindable } from "aurelia-framework";
import { TreeNodeModel } from "./model";

export class Node {
  @bindable node: TreeNodeModel;
  @bindable indent: number = 0;
}

对应的视图：

<template>
  <div style="margin-left: ${indent * 8}px;">
    <div>${node.name}</div>
    <div repeat.for="child of node.children">
      <node node.bind="child" indent.bind="indent + 1"></node>
    </div>
  </div>
</template>

所有代码的工作示例可在以下位置获得：

https://codesandbox.io/s/aurelia-recursive-tree-nodes-6fi9e?file=/src/node.html:0-226

最好的祝愿。

【讨论】：