Feature request: element.ref in repeat.for, with.bind

[davismj]

I'm finding that I need to track the elements associated with various pieces of data that are getting bound throughout my view model. Aurelia only provides methods for accessing elements at the root view model, either through element.ref or through injecting an Element.

I'd like to propose that we have element.ref hoist to the closest binding context change, specifically either repeat.for or with.bind. That is:

<!-- attaches a property "el" to the "todo" object -->
<div repeat.for="todo of notyetdone" element.ref="el"></div>
<div with.bind="todo" element.ref="el"></div>

<!-- this too, since compose changes the bindingContext -->
<compose view-model.bind="todo" element.ref="el"></compose>

[EisenbergEffect]

I thought that using a ref there would attach it to the todo...
@jdanyow can you confirm?

[EisenbergEffect]

I'm referring to the repeat and with cases.

[jdanyow]

https://gist.run/?id=4f6ba08fbea90d3a02ec4f59759f249d

<template>
  <div with.bind="person" element.ref="el">
    ${firstName} ${middleName} ${lastName}
  </div>
  app.el = ${el}<br/>
  person.el = ${person.el}
</template>

Result:

Mathew James Davis
app.el = 
person.el = [object HTMLDivElement]

This is what I would expect the behavior to be. @davismj is this your expectation as well? If not, you could use element.ref="$parent.el".

[jdanyow]

whoops hit wrong button

[atsu85]

Thanks @jdanyow , works like charm with repeater as well (what @davismj initially asked for): https://gist.run/?id=3e7f173cafba1b01deb323d5c864163d :)

[davismj]

I can't get this behavior with repeat. See here:

https://gist.run/?id=1cb2ce7662e84e333b65d4f687d3a30f

[jdanyow]

https://gist.run/?id=1cb2ce7662e84e333b65d4f687d3a30f&sha=0bfa8bb8b7088305f4a8d2b2d791cfed9394b2d6

In the gist ^^^ the root/app binding context has persons and addPerson, then there's a repeat:

<div repeat.for="person of persons" element.ref="el">
    ${person.firstName} ${person.middleName} ${person.lastName}
  </div>

this creates a series of child binding contexts which have person and el properties. If you want to put the el property on the outer (root/app) binding context you could do this: element.ref="$parent.el". It makes little sense to do so because each repeated item would overwrite the previous.

Does that make sense?

[davismj]

Not entirely. I would expect this block of code to put an el on each person.

<div repeat.for="person of persons" element.ref="el">
  ${person.firstName} ${person.middleName} ${person.lastName}
</div>

this creates a series of child binding contexts which have person and el properties

So if I follow you, then I can do this:

<div repeat.for="person of persons" element.ref="el">
  ${person.firstName} ${person.middleName} ${person.lastName}
  Element: ${el}
</div>

If so, then from what I know of the binding system, I sort of understand what's happening, but I don't think this is a desired behavior. I can't imagine a use case for this. What do you think?

[jdanyow]

The repeat and with template controllers are different animals- each mirrors a language feature. I think you might be looking for a controller that combines repeat and with that would enable something like this:

<div repeat-WITH.bind="persons" element.ref="el">
  ${firstName} ${middleName} ${lastName}
  Element: ${el}
</div>

Instead of doing what is currently supported:

<div repeat.for="person of persons" element.ref="person.el">
  ${person.firstName} ${person.middleName} ${person.lastName}
  Element: ${person.el}
</div>

Does that sound about right?

[davismj]

<div repeat.for="person of persons" element.ref="person.el">

Never seen that before, that was what I was looking for.