Au 2.0RC: How do we access $attrs in code? [RESOLVED]

Framework Knowledge
1

Hello,

I have written a thin wrapper around another of my components (which is itself a wrapper around a DevExtreme TextArea):

tsi-dx-text-area-ex.js

import { bindable, capture, customElement } from 'aurelia';

@customElement('tsi-dx-text-area-ex')
@capture()
export class TsiDxTextAreaEx {
  @bindable allowBlankFirstLine = true;
  @bindable allowNewLines = false;
  ...
  
}

I have no problem accessing $attrs in the template (and this is working just fine):

tsi-dx-text-area-ex.html

<import from="./tsi-dx-text-area"></import>

<div class="tsi-dx-text-area">
  <tsi-dx-text-area ...$attrs></tsi-dx-text-area>
  ...
</div>

Also, there’s no overlap with explicitly defined bindables on TsiDxTextAreEx. I’m trying to access the captured bindings in code, as I would in the normal way (with explicitly defined bindables).

I tried this in the viewModel:

this.$attrs['show-clear-button'] // <-- show-clear-button is a captured binding

along with other variations of this, but it’s not working.

But how do I access $attrs in code, in the viewModel?

2

I just figured out that I can repeat the bindings in the wrapped component for any bindings that I need to reference in code.

Because of that, there’s probably no need to reference $attrs in code.

I just have to remember that I now have to do this after $attrs:

tsi-dx-text-area-ex.html

<import from="./tsi-dx-text-area"></import>

<div class="tsi-dx-text-area">
  <tsi-dx-text-area ...$attrs value.bind="value"></tsi-dx-text-area>
  ...
</div>

value comes in on $attrs, but is repeated in the wrapped component and referenced independently in the view.