html - 使用动态绑定(bind)的 polymer 绘制树结构

Question

我正在使用 Polymer 开发一个 Web 应用程序，其中包含一个模块，我们希望在其中将家庭结构显示为树。悬停在每个节点上应该突出显示该树的完整路径。我有一个 JSON，如下所示。

这个 JSON 包含一个家族的层次结构(为了简单起见，我删除了一些节点)。

我想要这样的树

我现在所拥有的是:

如您所见，我找不到绘制链接的方法。

我用来创建这个 View 的代码如下:

家谱.html

<dom-module id="family-tree">
<style>
    :host {
        display: block;
    }      
</style>
<template>
    <call-api auto file="mockdata.json" on-response="handleResponse" 
        last-response="{{familyInfo}}" handle-as="json"></call-api>
    <template is="dom-repeat" items="{{familyInfo.plugin}}">
        <div class="tree">
            <div class="node">
                <a href="#">{{item.id}}</a>
            </div>
            <tree-wrapper family-hierarchy="{{item.children}}"></tree-wrapper>
        </div>
    </template>
</template>

polymer ( { 是:'家谱'， 特性: { 家庭信息:{ 类型:对象， 通知:真 }, } });

和 tree-wrapper.html:

<dom-module id="tree-wrapper">
<style>
    :host {
        display: block;
    }
</style>
<template>
    <div class="item">
        <ul>
            <template is="dom-repeat" items="[[familyHeirarchy]]">
                <li>
                    <div class="node">{{item.id}}</div>
                    <tree-wrapper family-heirarchy="{{item.children}}"></tree-wrapper>
                </li>
            </template>
        </ul>
    </div>
</template>

polymer ( { 是:'树包装'， 特性: { familyHeirarchy:{ 类型:数组， 值(value): []， } }, });

在我的 index.html 中

这将递归绑定(bind)并生成节点。谁能告诉我如何绘制如图所示的链接？

Answer 1

如果你能创建一个 plunker，我可能可以帮助你处理 CSS。