将 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;
 }

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

Bind object in repeat.for to custom element