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>