javascript - Wie schreibe ich einen Dateiverzeichnisbaum mit Polymer?

Question

Ich habe mir erst vor zwei Tagen die Grundstruktur von Polymer angesehen und muss sie jetzt zum Schreiben eines Dateiverzeichnisbaums verwenden. Deshalb habe ich ein Baum-Tag abgerufen, das von jemand anderem auf Git geschrieben wurde, aber ich weiß nicht, wie ich es verwenden soll Ich hoffe, es gibt jemanden, der sich mit Polymeren auskennt. Bitte geben Sie mir die Antwort, danke!
Hier ist der Inhalt dieses Tags:

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="iris-treeview">
  <template>
    <style>
      :host {
        display: block;
        position: relative;
        color: var(--mydoc-brown-1000);
      }
      
      span {
        cursor: pointer;
      }
      
      iris-treeview:before {
        content: '';
        display: inline-block;
        border-top: 2px solid;
        padding-left: 15px;
        margin-left: -25px;
        height: 5px;
      }
      
      .branch {
        padding-left: 25px;
        border-left: 2px solid;
        position: relative;
      }
      
      .branch:last-of-type:after {
        content: '';
        border-left: 2px solid;
        position: absolute;
        top: 10px;
        bottom: 0;
        color: white;
        margin-left: -27px;
      }
      
      .selected {
        color: var(--mydoc-brown-400);
      }
    </style>
    <content></content>

    <template is="dom-if" if="[[isBranch]]">
      <template id="list" is="dom-repeat" items="[[tier]]">
        <p class="branch" changed$="[[isChanged(item,switch)]]">
          <iris-treeview display-depth="[[down]]" data="[[data]]" selected="{{selected}}" display-leaf="[[displayLeaf]]" path$="[[path]].[[item]]">
            <span class$="{{treeviewClass(selected,item)}}" on-click="branchClick">[[item]]</span>
          </iris-treeview>
        </p>
      </template>
    </template>

    <template is="dom-if" if="[[isLeaf]]">
      <span class="leaf" on-click="leafClick" hidden$="[[!displayLeaf]]">[[value]]</span>
    </template>

  </template>
  <script>
    'use strict'
    Polymer({
      is: 'iris-treeview',
      properties: {
        data: {
          type: Object,
          observer: '_dataChanged'
        },
        displayDepth: {
          type: Number,
          value: 10
        },
        displayLeaf: {
          type: Boolean,
          value: false
        },
        path: {
          type: String,
          value: ''
        },
        selected: {
          type: Object,
          notify: true
        }
      },
      observers: ['_deepChanged(data.*)'],
      _deepChanged(data) {
        this.set('switch', !this.switch);
      },
      isChanged(item, s) {
        return false;
      },
      treeviewClass(sel, item) {
        return (sel == this.path + '.' + item) ? 'selected' : "";
      },
      branchClick(e) {
        console.log(this.path);
        let item = e.model.item;
        let branch = this.data[item]
        let path = this.path + '.' + item;

        this.fire('select', {
          type: 'branch',
          value: branch,
          path: path
        });
        this.fire('select-branch', {
          value: branch,
          path: path
        });

        this.set('selected', path);
      },
      leafClick(e) {
        let path = this.path + '.' + item;
        this.fire('select', {
          type: 'leaf',
          value: this.value,
          path: path
        });

        this.fire('select-leaf', {
          value: this.value,
          path: path
        });

        this.set('selected', path);
      },
      _dataChanged(data) {
        if (this.displayDepth <= 0) return;
        this.down = this.displayDepth !== false ? this.displayDepth - 1 : false;
        let q = this.path.split('.');

        let current = _.slice(q, 1).length ? _.get(this.data, _.slice(q, 1)) : this.data;

        let branch = true;

        if (_.isObject(data)) {
          this.set('tier', _.keys(current));
        } else {
          branch = !branch;
          this.set('value', data);
        }

        this.set('isBranch', branch);
        this.set('isLeaf', !branch);
      },
      getTier(item) {
        return this.data[item]
      }
    });
  </script>
</dom-module>

Answer 1

调用方式正如组件里自引用的方式一样，传递properties，写children

<iris-treeview
    display-depth="[[down]]"
    data="[[data]]"
    selected="{{selected}}"
    display-leaf="[[displayLeaf]]"
    path$="[[path]].[[item]]"
>
  <span class$="{{treeviewClass(selected,item)}}" on-click="branchClick">
    [[item]]
  </span>
</iris-treeview>