Question

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

这是我目前的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);
}

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

由于项目将由使用此组件的人员定义，因此无法定义路线。所以，我想知道是否/如何定义子项目，以便可以访问，重复和显示它们是否存在？我是否只想在评论中添加如何包含子项目？类似于：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

我建议不要使用对象中的点击功能，这样就可以将＆＃34;模型＆＃34;来自逻辑。

使用clickHandler类中的Dropdown根据点击的元素决定做什么。 e.g。

HTML 的

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

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

有条件地显示Aurelia

1 个答案: