Access ref elements inside a repeat.for

Question

I've got a ref of an object inside a repeat.for which looks like this

<tr repeat.for="machine of machines">
    <div with.bind="machine" ref="pb">...</div>
</tr>

Aurelia Inspector shows the ref under the machine object:

I tried to access it in attached() like this:

attached() {
    console.log(this.machines[0].pb)
}

but of course this will return an error since pb does not exist on the object.

Usually when I try to access ref-bound elements in my Typescript code, I know I need to initialize them first. But how can I do that now since it's inside of another object?

Answer 1

Found the answer. Defined the objects in typescript as

pbElements = [];

And set this in the html:

<tr repeat.for="machine of machines">
    <div ref="pbElements[$index]">...</div>
</tr>