¿Cuál es la forma correcta en aurelia de enlazar un elemento personalizado usando repeat.for

Usando Aurelia, estoy luchando con el enlace y la repetición. Para: supongamos que tengo en mi modelo de vista con un menú de propiedades Elementos (una matriz deMenuItem) Me gustaría repetir los elementos del menú con una plantilla personalizada:

export class App {
    menuItems : MenuItem[];
}
export class MenuItem{
   label:string;
}

En la plantilla de mi aplicación, uso un elemento personalizado

<require from="./menu-item"></require>
<ul>
  <menu-item repeat.for="item of menuItems"></menu-item>
</ul>

Mi plantilla personalizada (menu-item.html):

<template>
  <li>${label}</li>
</template>

¿Cuál es la forma correcta de vincular la plantilla o acceder al MenuItem vinculado?

He intentado lo siguiente:${label} y${item.label} Pero eso no funciona. Puedo ver en elbind(bindingContext) devolución de llamada que vinculanteContext tiene una propiedad 'elemento':bindingContext.item que es el MenuItem que se está vinculando.

También intenté crear un atributo enlazable en la clase MenuItem:

export class MenuItem{
   @bindable current any;
   label:string;
}

y el siguiente repetidor:

<menu-item repeat.for="item of menuItems" current.bind="item"></menu-item>

y una plantilla correspondiente

<template>
  <li>${current.label}</li>
</template>

nota: vea la edición 1 a continuación, para mi comentario sobre este punto en el código.

Este enfoque tampoco funciona.

Otras exploraciones incluyeron no usar un elemento personalizado (trabajado), usar<compose view-model='MenuItem', model.bind='item'/>, tampoco funciona en este ejemplo y sería elaborado, creo.

Solución de trabajo, ver tambiénAurelia repeat.for vinculante en un elemento personalizado:

repita y enlace en un atributo personalizado de la plantilla y la clase de modelo de vista:

<menu-item repeat.for="item of menuItems" current.bind="item" containerless></menu-item>

La clase viewmodel:

import {bindable, customElement} from 'aurelia-framework'

@customElement('menu-item')
export class MenuItem{
  label = "default label";
  @bindable current;

  constructor(label){
    this.label = label;
  }
  attached(){
    console.log("MenuItem = attached");
  }
}

Editar 1:

Veo en la salida el html de plantillas repetido para tantos elementos de menú. Pero estos elementos no están vinculados: el<li> esta vacio. Esperaba ver las etiquetas.

Edición 2:

en esta publicación escribí "elementos en menuItems", eso no es correcto, debería ser "item of menuItems". Pero esa no fue la causa de mi lucha, solo escribí mal en esta publicación

Edición 3:

@ jeremy-danyow sugirió que

html debe estar bien formado: el elemento de menú dentro de ul no es correcto (usandocontainerless el atributo ayuda al eliminar el elemento del elemento del menú)Los elementos personalizados siempre deben tener una etiqueta de cierre. He adaptado el código. También hice un saqueador:Aurelia repeat.for vinculante en un elemento personalizado

Ese saqueador funciona, siempre que@bindable atributo;