Custom attribute options binding breaks if interpolation is used

[thomas-darling]

I'm submitting a bug report

• Library Version:
  [email protected]
  [email protected]
  [email protected]

• JSPM OR Webpack AND Version
  Webpack 4.28.3

• Browser:
  Chrome 73 | Safari 12 | ...

Current behavior:

Let's assume I have a custom attribute foo with a bindable property path of type string.

This works - meaning that the bindable property is set to the value of someProperty:

<div foo="path.bind: someProperty">

This does not work - meaning that the bindable property is never set and remains undefined:

<div foo="path: ${someProperty}">

Expected/desired behavior:

• What is the expected behavior?

I expected the path property to be set to the same value in both cases - and I most certainly didn't expect it to remain undefined when bound using the second approach.

Shouldn't this work?

• What is the motivation / use case for changing the behavior?

In the examples above, the first approach is of course the cleanest anyway.
However, when binding something like a path containing a dynamic segment, the second approach would be cleaner - and it is certainly something one would expect to just work:

<div foo="path: something/${someProperty}">

[fkleuver]

Thanks for the feature request. It makes sense.

This could probably be done but it will require a bit of work in vCurrent to ensure no regressions come with it. I'll be implementing it in vNext first, where we have a better testing baseline, and then see if it can be backported. Unfortunately I cannot provide a timeframe yet.

In the meantime, you might want to try using a template expression instead. It's a little less clean perhaps, but it should work:

<div foo="path: `something/${someProperty}`">

Do let me know if it doesn't :)

[thomas-darling]

Sounds good 👍

I actually tried the template string too, just forgot to mention it.
It doesn't work either, and produces the same result - property remains undefined 😞

[elmt1]

I just ran into this while trying to use something like customattribute=${$index} and discovered that in my simple case, I can use "this.value" rather than element.attributes.[attributename].value in my custom attribute. Big win, however I don't know how to define my custom attribute so that this.value is defined. The typescript examples in the documentation imply that this.value would exist, however I don't see that it extends anything. Here is the example:
`
import {autoinject} from 'aurelia-framework';

@autoinject
export class SquareCustomAttribute {
constructor(private element: Element){
this.element.style.width = this.element.style.height = '100px';
}

bind() {
  this.element.style.backgroundColor = this.value;
}

}
`
It works OK, but won't compile without errors.

[fkleuver]

@elmt1 The property is added during binding, so you can simply declare it on your class to make TS happy.