Aurelia 中的递归组合元素

Question

假设我有这个视图，“菜单”是一个菜单对象的集合，它也可能有一个名为 Children 的菜单对象的集合作为属性。

这是视图 -

        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            <ul class="nav navbar-nav">
                <li repeat.for="m of menu" class.bind="m.type=='child' ? 'dropdown' : ''" as-element="compose" data-type="${m.type}"
                    view="/client/landing/menubar/${m.type}menu"></li>
            </ul>
        </div>

我使用两个视图作为我的递归菜单，就像这样 -

（查看 - 没有子集合）

<template>
   <a href.bind="menu.link" data-info="${menu.type}">${menu.displayText}</a>
</template>

（视图 - 带有子集合）

<template>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">${menu.displayText} <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li repeat.for="m of menu.children" data-info="${m.type}" class.bind="m.haschildren ? 'dropdown' : ''" 
            as-element="compose" view="/client/landing/menubar/${m.type}menu"></li>
    </ul>
</template>

这两个视图的视图模型都是这样的 -

从“aurelia-framework”导入 { customElement, bindable, inject };

@customElement("parentmenu")
export class ParentMenu {
    @bindable menu;
}

我得到了一些东西。视图确实显示（尽管没有递归）。问题是 repeat.for="m of menu" 在第一个视图中的绑定下根本不起作用。

我哪里出错了？

Answer 1

无需使用撰写。您的菜单可能会简单得多，例如：

<template bindable="model">
  <ul>
    <li repeat.for="item of model">
      <a href.bind="item.link">${item.displayText}<a/>
      <menu if.bind="item.children && item.children.length" model.bind="item.children"></menu>
  </ul>
</template>

用法：

<menu model.bind="menu"></menu>

JS：

menu = [
  { 
    displayText: '1', 
    href: '' 
  },
  { 
    displayText: '2', 
    children: [
      { 
        displayText: '3', 
        href: '' 
      },
      {
        displayText: '4', 
        href: '',
        children: [
          { 
            displayText: '3', 
            href: '' 
          }
        ]
      }
    ]
  }
];