Используя Aurelia, я борюсь с привязкой и repeat.for: предположим, что у меня есть в моей viewmodel свойство menuItems (массивMenuItem) Я хотел бы повторить пункты меню с пользовательским шаблоном:

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

В моем шаблоне приложения я использую пользовательский элемент

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

Мой пользовательский шаблон (menu-item.html):

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

Как правильно получить привязанный шаблон или получить доступ к привязанному MenuItem?

Я пробовал следующее:${label} а также${item.label} но это не работает. Я могу видеть вbind(bindingContext) Обратный вызов, что bindingContext имеет свойство 'item':bindingContext.item который является MenuItem, который привязан.

Я также попытался создать привязываемый атрибут в классе MenuItem:

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

и следующий повторитель:

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

и соответствующий шаблон

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

примечание: см. правку 1 ниже для моего комментария по этому вопросу в коде.

Этот подход также не работает.

Другие исследования включали не использование пользовательского элемента (работал), используя<compose view-model='MenuItem', model.bind='item'/>, в этом примере тоже не работает и, я думаю, был бы разработан.

Рабочий раствор, см. ТакжеAurelia repeat.for для привязки к пользовательскому элементу:

повторите и привяжите пользовательский атрибут шаблона и класса viewmodel:

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

Класс 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");
  }
}

Изменить 1:

Я вижу в выводе html шаблонов, повторяемых столько же, сколько существует MenuItems. Но эти предметы не связаны:<li> пустой. Я ожидал увидеть этикетки.

Изменить 2:

в этом посте я набрал "items in menuItems", это не правильно, это должен быть "item of menuItems". Но это не было причиной моей борьбы, я неправильно набрал ее в этом посте.

Изменить 3:

@ jeremy-danyow предположил, что

HTML должен быть правильно сформирован: пункт меню в ul неверен (используетсяcontainerless атрибут помогает, удалив элемент menu-item)Пользовательские элементы всегда должны иметь закрывающий тег. Я адаптировал код. Также я сделал поршень:Aurelia repeat.for для привязки к пользовательскому элементу

Этот поршень работает, при условии@bindable атрибутов;