Usando Aurelia, estou lutando com a vinculação e repeat.for: suponha que eu tenha no meu viewmodel uma propriedade menuItems (uma matriz deMenuItem) Gostaria de repetir os itens de menu com um modelo personalizado:

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

No meu modelo de aplicativo, uso um elemento personalizado

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

Meu modelo personalizado (menu-item.html):

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

Qual é a maneira correta de obter o modelo vinculado ou acessar o MenuItem vinculado?

Eu tentei o seguinte:${label} e${item.label} mas isso não funciona. Eu posso ver nobind(bindingContext) retorno de chamada que bindingContext possui uma propriedade 'item':bindingContext.item que é o MenuItem que está sendo vinculado.

Eu também tentei criar atributo vinculável na classe MenuItem:

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

e o seguinte repetidor:

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

e um modelo correspondente

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

nota: veja a edição 1 abaixo, para o meu comentário sobre este ponto no código.

Essa abordagem também não funciona.

Outras explorações incluíram não usar um elemento personalizado (trabalhado), usar<compose view-model='MenuItem', model.bind='item'/>, também não funciona neste exemplo e seria elaborado, eu acho.

Solução de trabalho, veja tambémAurelia repeat. Para ligação em um elemento personalizado:

repita e ligue um atributo personalizado da classe template e viewmodel:

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

A classe 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:

Vejo na saída o html de modelos repetidos para tantos itens de menu. Mas esses itens não estão vinculados: o<li> está vazia. Eu esperava ver os rótulos.

Edição 2:

neste post, digitei "items in menuItems", isso não está correto, deve ser "item of menuItems". Mas essa não foi a causa da minha luta, eu a digitei incorretamente apenas neste post

Edição 3:

@ jeremy-danyow sugeriu que

html deve ser bem formado: o item de menu dentro de ul não está correto (usandocontainerless atributo ajuda removendo o elemento do item de menu)elementos personalizados sempre devem ter uma marca de fechamento. Eu adaptei o código. Também fiz um plunker:Aurelia repeat. Para ligação em um elemento personalizado

Esse plunker funciona, desde que@bindable atributo;