Каков правильный способ в aurelia привязываться к пользовательскому элементу с помощью repeat.for

Question

Использование Aurelia Я борется со связыванием и повторением. For: Предположим, у меня есть в моей модели просмотра с меню свойствItems (массив MenuItem) I хотел бы повторить пункты меню с помощью пользовательского шаблона:

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> 

мой пользовательский шаблон (меню 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 binding on a custom element :

повтора и связываются на пользовательский атрибут шаблона и 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 :

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

Edit 2:

в этом посте я напечатал «пунктов в MenuItems», это не исправить это должно быть «пункт MenuItems».Но это не было причиной моего Борясь, я его неправильно набранный в этом посте только

Edit 3:

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

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

Это plunker работы, при условии, атрибут @bindable;

Answer 1

Браузеры разрешают только li элементы внутри ul элементы. <ul><menu-item></menu-item></ul> является недопустимой разметкой таким же образом, что <ul><div></div></ul> является недопустимой разметкой.

Рассмотрите возможность создания элемента <menu>, шаблон которого содержит ul, и это вместо li элементов.

Еще одна вещь - только несколько стандартных элементов «закрываются» - например, входы и т. Д. Пользовательские элементы всегда должны иметь закрывающий тег. Плохо: <menu-item /> Хорошо: <menu-item></menu-item>

Вам может быть интересно «? Почему не может Aurelia цифра это для меня»

Действительный вопрос. Вот почему: Aurelia не реализует пользовательский парсер html. Он использует DOM для анализа стандартного HTML. Это отличается от других фреймворков, которые люди могут привыкнуть к тому, чтобы внедрять пользовательские парсеры для нестандартных синтаксисов разметки.