Recursive compose element in Aurelia

Question

So let's say I've got this view and "Menu" is a collection of menu objects which may also have a collection of menu objects named Children as a property.

Here's the view -

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

And there are two views I'm using as my recursive menu, like so -

(View - no child collection)

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

(View - with child collection)

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

And the viewmodels for these two views both look like this -

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

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

I'm getting something. The views do display (although without recursion). The problem is that the repeat.for="m of menu" simply doesn't work below the bind in the first view.

Where have I gone wrong?

And before anyone goes there, I can't use Aurelia routing on this SPA. The app as a whole consists of several SPAs, some will use routing. This one depends on server data and binds largely to local # anchors. — Rich Bryant

Fabio Luz Fabio Luz · Accepted Answer · 2017-03-21T18:23:28

There's no need to use compose. Your menu could be a lot simpler, like:

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

Usage:

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

JS:

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

Recursive compose element in Aurelia

1 Answers