Was ist der richtige Weg in Aurelia, um ein benutzerdefiniertes Element mit repeat.for @ zu binde

Mit Aurelia habe ich Probleme beim Binden und Wiederholen. Angenommen, ich habe in meinem Ansichtsmodell eine Eigenschaft menuItems (ein Array vonMenuItem) Ich möchte die Menüs mit einer benutzerdefinierten Vorlage wiederholen:

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

In meiner App-Vorlage verwende ich ein benutzerdefiniertes Element

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

Meine benutzerdefinierte Vorlage (menu-item.html):

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

Was ist der richtige Weg, um die Vorlage zu binden oder auf das gebundene MenuItem zuzugreifen?

Ich habe Folgendes versucht:${label} und${item.label} aber das geht nicht. Ich kann in der @ sehbind(bindingContext) Rückruf, dass bindingContext eine Eigenschaft 'item' hat:bindingContext.item Das ist das Menüelement, das gebunden wird.

Ich habe auch versucht, ein bindbares Attribut für die MenuItem-Klasse zu erstellen:

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

und der folgende Repeater:

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

und eine entsprechende Vorlage

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

note: siehe edit 1 unten für meinen Kommentar zu diesem Punkt im Code.

Dieser Ansatz funktioniert auch nicht.

Weitere Erkundungen, bei denen kein benutzerdefiniertes Element verwendet wurde (funktioniert), mithilfe von<compose view-model='MenuItem', model.bind='item'/>, funktioniert auch in diesem Beispiel nicht und wäre meiner Meinung nach zu aufwendig.

Arbeitslösung, siehe auchAurelia repeat.for Bindung an ein benutzerdefiniertes Element:

wiederholen und binden Sie ein benutzerdefiniertes Attribut der Klasse template und viewmodel:

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

Die Ansichtsmodell-Klasse:

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");
  }
}

Edit 1:

Ich sehe in der Ausgabe den HTML-Code von Vorlagen, der für die Anzahl der MenuItems wiederholt wird. Diese Artikel sind jedoch nicht gebunden: das<li> ist leer. Ich habe erwartet, die Etiketten zu sehen.

Edit 2:

in diesem Post habe ich "items in menuItems" eingegeben, das ist nicht richtig, es sollte "item of menuItems" sein. Aber das war nicht die Ursache meines Kampfes, ich hatte es nur in diesem Beitrag falsch geschrieben

Edit 3:

@ Jeremy-Danyow schlug vor, dass

html sollte wohlgeformt sein: Menüpunkt in ul ist nicht korrekt (mitcontainerless Attribut hilft durch Entfernen des Menüelementes)custom-Elemente sollten immer ein schließendes Tag haben. Ich habe den Code angepasst. Auch ich habe einen Plunker gemacht:Aurelia repeat.for Bindung an ein benutzerdefiniertes Element

Dieser Plunker funktioniert, vorausgesetzt, ein@bindable attribute;