Javascript Aurelia中的递归合成元素

假设我有这个视图，“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>

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

---

我哪里出错了？

没有必要使用compose。您的菜单可以简单得多，如：

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

---

没有必要使用compose。您的菜单可以简单得多，如：

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

---

在有人去之前，我不能在这个水疗中心使用Aurelia routing。整个应用程序由几个SPA组成，一些SPA将使用路由。这一个依赖于服务器数据，并且大部分绑定到本地锚。在有人访问之前，我不能在这个SPA上使用Aurelia路由。整个应用程序由几个SPA组成，一些SPA将使用路由。这一个依赖于服务器数据，主要绑定到本地锚。这是一个简洁的答案，我正在尝试。问题出现在中继器设置为

上，不幸的是，如果重复项有子项，

标记需要使用下拉菜单设置样式。如何访问重复元素中的当前项

而不是

：

。正确的语法是：

class=“${item.childrence.length？”下拉列表“：“none”}”

。如果您不想在

上设置中继器，您应该在这里执行
操作。这将作为一个无容器中继器工作，就像上面的KO语句一样完美地工作！要是文档中有这个就好了！非常非常感谢。这是一个简洁的答案，我正在尝试。问题出现在中继器设置为
上，不幸的是，如果重复项有子项，
标记需要使用下拉菜单设置样式。如何访问重复元素中的当前项
而不是
：
。正确的语法是：
class=“${item.childrence.length？”下拉列表“：“none”}”
。如果您不想在
上设置中继器，您应该在这里执行
操作。这将作为一个无容器中继器工作，就像上面的KO语句一样完美地工作！要是文档中有这个就好了！非常非常感谢。
@customElement("parentmenu")
export class ParentMenu {
    @bindable menu;
}

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

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