javascript - 如何用polymer写一个文件目录树？

问题描述

前两天刚看了polymer的基本结构，现在需要用它写一个文件目录树，于是在git上检索出了一个别人写tree标签，但是不知道该如何掉用，希望有深入了解过polymer的大神解答一下，谢谢！一下为该标签的内容：

<link rel='import' href='https://www.haobala.com/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 is='dom-repeat' items='[[tier]]'><p 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 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>

问题解答

调用方式正如组件里自引用的方式一样，传递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>