Aurelia中的递归组合元素

Question

假设我有这个视图，"Menu"是菜单对象的集合，也可能具有一个名为 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>

而这两个视图的视图模型都如下所示 -

import { customElement， bindable， inject } from "aurelia-framework";

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

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

我哪里做错了？

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: '' 
          }
        ]
      }
    ]
  }
];