javascript - Bagaimana untuk menulis pokok direktori fail menggunakan polimer?

Question

Saya baru melihat struktur asas polimer dua hari lalu, dan sekarang saya perlu menggunakannya untuk menulis pepohon direktori fail, jadi saya mendapatkan semula teg pokok yang ditulis oleh orang lain di git, tetapi saya tidak tahu cara menggunakannya itu. Saya harap ada seseorang yang mempunyai pemahaman mendalam tentang polimer. Tolong beri saya jawapan, terima kasih!
Ini kandungan tag ini:

<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

Kaedah panggilan adalah sama dengan kaedah rujukan kendiri dalam komponen, sifat lulus dan menulis kanak-kanak

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