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

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

以下是我当前的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>

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

• 由于项目将由使用此组件的人员定义，因此无法定义路由。所以我想知道是否/如何定义子项，以便可以访问、重复和显示它们（如果存在）？ 我是否会在我的评论中添加它们应该如何包含子项？类似于：

  config.items=[{label:String，click:Function，subitem:[{label:String，click:Function}]}]

• 如果要为所有子项（如果存在）设置重复，如何访问这些项？是否类似于

  repeat.for=“config.items.subitem的subitem.item”

  ？我很确定这是不正确的，所以任何关于这方面的建议都是很好的

感谢您提供的任何指导

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

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

---

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

我建议不要在对象中使用click函数，以便将“模型”与逻辑分离

使用

下拉列表中的
clickHandler
类根据单击的元素决定要执行的操作。e、 g

html

您可以为子项使用单独的单击处理程序，或者在操作类似的情况下使用相同的处理程序，这取决于您的具体情况。
我建议不要在对象中使用单击函数，这样您就可以将“模型”与逻辑分开

使用
下拉列表中的
clickHandler
类根据单击的元素决定要执行的操作。e、 g

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

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

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

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