想要创建n级菜单组件

Question

我正在使用 aurelia 和 ES6 创建一个级别菜单组件。 我得到的 json 是：

data: [
  levelId: 1,
  label: 'Level1',
  chlidItems: [
    {
       levelId: 2,
       label: 'Level2',
       childItems: [] // so on multiple levels
    }
  ]
]

在 HTML 中，我直接在数据上使用 repeat.for 显示基础级别。

<div class="main-level" ref="pgElm">
  <div class="main-label" repeat.for="dataObj of data" click.trigger="openChildItems($event, dataObj, $index)">${dataObj.label}</div>
</div>

我想在点击时添加子项。 我为此尝试了两种方法。

1st 我使用 aurelia 模板引擎添加子 div。

openChildItems(_event, _dataObj, _index) {
    this.$pgElm = $(this.pgElm);
    if (_dataObj && _dataObj.childItems && _dataObj.childItems.length) {
      let parentDiv = null;
      if (_dataObj.levelId === this.schema.data[0].levelId) {
        parentDiv = this.$pgElm.find('.main-label')[_index];
      } else {
        parentDiv = this.$pgElm.find('.child-' + _dataObj.levelId + '-label')[_index];
      }

      let childDiv = document.createElement('div');
      childDiv.className = 'child-' + _dataObj.childItems[0].levelId;
      parentDiv.appendChild(childDiv);
      this.className = 'child-' + _dataObj.childItems[0].levelId + '-label';
      this.variableName = 'childItems' + _dataObj.childItems[0].levelId ;
      this.viewData['childItems' + _dataObj.childItems[0].levelId] = _dataObj.childItems;
      childDiv.innerHTML = "<div class='${className}' repeat.for='child of viewData[variableName]' click.trigger='openChildItems($event, child, $index)'>${child.label}</div>";
      let view = this.templatingEngine.enhance({element: childDiv, bindingContext: this});
    }
  }

这种方法的问题在于数据在各个层面都在变化。

然后我尝试使用另一种方法来附加 div。

 openChildItems(_event, _dataObj, _index) {
    this.$pgElm = $(this.pgElm);
    if (_dataObj && _dataObj.childItems && _dataObj.childItems.length) {
      let parentDiv = null;
      if (_dataObj.levelId === this.schema.data[0].levelId) {
        parentDiv = this.$pgElm.find('.main-label')[_index];
      } else {
        parentDiv = this.$pgElm.find('.child-' + _dataObj.levelId + '-label')[_index];
      }

      let childDiv = document.createElement('div');
      childDiv.className = 'child-' + _dataObj.childItems[0].levelId;
      $(parentDiv).append(childDiv);

      let childItems = _dataObj.childItems;
      let index = 0;
      for (let child of childItems) {
        let childLabelDiv = document.createElement('div');
        childLabelDiv.className = 'child-' + child.levelId + '-label';
        childLabelDiv.innerHTML = child.label;
        childLabelDiv.addEventListener('click', (e)=>{
             this.evtOpenChildItems(e, child, index);
             e.stopPropagation();
        });
        $(childDiv).append(childLabelDiv);
        index ++;
      }
    }
  }

现在我遇到的问题是当我单击第一级子项时，我将 parentDiv 设为未定义。

请帮助我解决我在方法上出错的地方，以及是否有另一种方法来实现它？

Answer 1

我真的不明白你为什么要像这样动态地构建它，你不能做这样的事情：

//my-tree-component.ts
<div class="main-level" ref="pgElm">
  <div class="main-label" repeat.for="dataObj of data" 
       click.trigger="toggleOpenClose()">
    ${dataObj.label}
    <my-tree-component if.bind="open"></my-tree-component>
  </div>
</div>