Question

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

此JSON包含一个系列的层次结构（为简单起见，我删除了一些节点）。

我希望树像

我现在所拥有的是：

正如您所看到的，我无法找到绘制链接的方法。

我用来创建此视图的代码如下：

家庭tree.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>

聚合物（ { 是：＆＃39; family-tree＆＃39;，属性：{ familyInfo：{ type：对象，通知：是的 }， } }）;

和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>

聚合物（ { 是：＆＃39;树包装＆＃39;，属性：{ familyHeirarchy：{ 类型：数组，价值：[]， } }， }）;

和我的index.html

这将以递归方式绑定并生成节点。任何人都可以告诉我如何绘制如图所示的链接吗？

Answer 1

如果你可以创建一个plunker，我可以帮助解决这个问题。

使用动态绑定绘制具有聚合物的树结构

1 个答案: