将repeat.for中的对象绑定到自定义元素

Question

我有一个名为contact的自定义元素，此元素的目的是充当聊天信使联系人。我在父母中有一个名为contacts的数组。它看起来像这样：

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

父HTML称为messages，我想要发生的是在repeat.for语句中，来自此数组的数据绑定到自定义元素。我已经尝试了这个

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

但是如何将repeat.for中的contact绑定到自定义元素？

Answer 1

如果你有contact.js

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

in 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>