Привязать объект в repeat.for к настраиваемому элементу

Question

У меня есть пользовательский элемент с именем contact, цель которого состоит в том, что он служит контактом чата-мессенджера. У меня есть массив в родителе с именем contacts. Это выглядит следующим образом:

contacts = [ 
    { 
     firstName: 'First name', 
     lastName: 'Surname' 
    } 
]; 

Родитель HTML называется messages и то, что я хочу, чтобы это произошло, что в repeat.for заявлении данные из этого массива получает связанный с настраиваемого элемента. Я уже пробовал это

<contact repeat.for="contact of contacts"></contact>

Но как же я связать contact в repeat.for в пользовательский элемент?

Answer 1

Если у вас есть contact.js

import {bindable} from 'aurelia-framework'; 
export class Contact { 
    @bindable data; 
} 

в contact.html

<template> 
    ${data.firstName}&nbsp;${data.lastName} 
</template>  

в messages.js

export class Messages { 
    contacts = [ 
    { 
     firstName: 'First name', 
     lastName: 'Surname' 
    } 
    ]; 
} 

в messages.html

<template> 
    <require from="./contact"></require> 
    <contact repeat.for="contact of contacts" data.bind="contact"></contact> 
</template>