CODEWITHSUNDEEP
javascriptaurelia
DevNebulae
DevNebulae

Reputation: 4906

Bind object in repeat.for to custom element

I have a custom element called contact, the purpose of this element is that it serves as a chat messenger contact. I have an array in the parent called contacts. It looks like this:

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

The parent HTML is called messagesand what I want to happen is that in a repeat.for statement the data from this array gets bound to the custom element. I have already tried this

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

But how do I bind contact in the repeat.for to the custom element?

Upvotes: 2

Views: 100

Answers (1)

valu
valu

Reputation: 1196

If you have contact.js

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

in contact.html

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

in messages.js

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

in messages.html

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

Upvotes: 4

Related Questions