有条件地显示 Aurelia 中下拉菜单的子菜单项

Question

对于我在 Aurelia 中创建的下拉菜单，我想检查显示的任何 li 项是否有子菜单项，如果有，则显示该子菜单项并使其可点击而不是主项。由于我没有使用路由器，因此许多questions/answers不一定适合这种情况。

这是我目前的html：

<ul class="myDropdown" id="dropdownMenu">
  <li class="myDropdown_menu-option" repeat.for="item of config.items" click.trigger="clickHandler(item.action)">
    <i class="fa fa-user"></i> ${item.label}
    <ul class="myDropdown__submenu-container">
      <li class="myDropdown__menu-option">
        <span>
          <i class="fa fa-user"></i> Subitem Label
        </span>
      </li>
    </ul>
  </li>
</ul>

这是我当前的 JS（减去一些不相关的项目）：

export class Dropdown {
  parentContext;
  //config.items = [{ label:String, click:Function }]
  @bindable config = {
    items: [],
};

clickHandler( action ) {
    action.call(super.parentContext);
}

我想我想弄清楚的两件事是：

由于项目将由使用此组件的人定义，因此无法定义路线。所以我想知道 if/how 我需要定义子项以便可以访问、重复和显示它们（如果它们存在）吗？我会在我的评论中添加他们应该如何包含子项目吗？类似于：config.items = [{ label:String, click: Function, subitem:[{label:String, click: Function}] }]
如果我想为所有子项（如果存在）设置重复项，我该如何访问这些项？会像 repeat.for="subitem.item of config.items.subitem" 吗？我很确定这是不正确的，所以任何关于它的指示都会很棒。

感谢您提供的任何指导！

更新：在另一个人的帮助下，我能够进行一些更改以显示子项（如果它们存在）：

<ul class="myDropdown" id="dropdownMenu">
  <li class="myDropdown__menu-option" repeat.for="item of config.items" click.trigger="clickHandler(item.action)">
    <i class="fa fa-user"></i> ${item.label}
    <ul class="myDropdown__submenu-container">
      <li class="myDropdown__menu-option" repeat.for="subitem of items.subitems" click.trigger="clickHandler(subitems.action)">
        <span>
          <i class="fa fa-user"></i> ${subitem.label}
        </span>
      </li>
    </ul>
  </li>
</ul>

我正在 app.js 文件中填充这样的配置对象：

config = {
  items: [
    { label: 'Item 1', click: ()=>{}},
    { label: 'Item 2', click: ()=>{},
      subitems: [{ label: 'Subitem 2', click: ()=>{} }]
    }
  ]
};

所以我想我想知道的最后一件事是如何使点击选项以是否有子项目为条件。例如，如果没有子项目，则该项目应该是可点击的，但如果有子项目，则只有该子项目应该是可点击的。 click.trigger 是否需要以不同方式调用或在不同元素上调用以便应用条件？

Answer 1

我建议不要在您的对象中使用点击功能，这样您就可以将 "model" 与逻辑分开。

在Dropdownclass中使用clickHandler，根据点击的元素决定要做什么。例如

html

<li class="myDropdown__menu-option" repeat.for="item of config.items" click.delegate="clickHandler(item)">

viewModel:

clickHandler(item) {
    if (item.subitems && item.subitems.length > 0) {
        // do something
    }
    // by default if there are no subitems, nothing is done
}

您可以为子项设置单独的点击处理程序，或者如果操作相似则使用相同的处理程序 - 这取决于您的具体情况。

有条件地显示 Aurelia 中下拉菜单的子菜单项

Conditionally show submenu items for dropdown menu in Aurelia

javascript

submenu

drop-down-menu

aurelia