想要创建n级菜单组件

问题描述

我正在使用 aurelia 和 ES6 创建一个 n 级菜单组件。 我得到的 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,_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,index);
             e.stopPropagation();
        });
        $(childDiv).append(childLabelDiv);
        index ++;
      }
    }
  }

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

请帮助我解决方法的错误，以及是否有其他方法可以实现？

解决方法

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

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