custom boolean attributes not binding

Question

Custom boolean attributes do not bind like built in. checked.bind='1===2' will not include the checked attribute in the tag. myboolatt.bind='1===2' WILL include the myboolatt in the tag. I did myboolatt.bind='1===2 | boolconverter' myboolatt.bind='1===2 | boolconverter' to log out the value and it says false .

So what am I doing wrong? It seems Aurelia is inconsistent on binding expressions. Another instance is I can do this title=${$index<12} inside a repeat and I get what is expected. So I thought this would work - myboolatt.bind=${$index<12} . That doesn't even compile.

Believe me I have read the all the doc (doesn't mean I didn't miss something) and many posts including the long running discussions between the Aurelia team concerning boolean attributes.

I have wrapped expressions in "" and in ${} and in both but just can't get it to work.

It feels like I am missing 1 vital piece of information that will magically explain these inconsistencies and slay my frustration. One of the reasons I like Aurelia so much (on top of convention based) is that I have actually just guessed at a few things - thinking this is how I would do it - and ding-dang if they didn't just work.

I really feel like this should just work. So again I ask - what am I doing wrong?

Thanks

Answer 1

If you are using .bind , you bind it to the att variable in your js/ts file, and you should not use any dollar signs or brackets. For example, myboolatt.bind=${$index<12} should be myboolatt.bind="$index<12" . The use of the dollar sign in index has nothing to do with the bindings. This is just a variable provided by Aurelia.

When you want to use variables without bind you use ${variable} .

The checked attribute not being present, I in the tag I'm guessing is because it's evaluated to false, and the checked attribute is not a true/false attribute. A input that's checked will look like <input type="checkbox" checked/>

Answer 2

It was not Aurelia binding. I initially created bool attributes but did not have a need to bind. They were just empty classes. Then I needed binding so I added the necessary methods. What ended up causing the confusion was using myboolatt sends no argument into valueChanged where myboolatt.bind sends T or F. Not being a regular js'er this threw me a bit and I see there are a number of ways to handle. Anyway here are the attributes and usage. Hope it helps someone else.

Thanks

function private_ValueChanged(self, att, value) {
   if (value === false) self.element.removeAttribute(att);
   else self.element.setAttribute(att, '');
}

export class toggleCustomAttribute {
  static inject = [Element];
  constructor(element) { this.element = element; }
  valueChanged(newValue, oldValue) { private_ValueChanged(this, 'toggle', newValue); 
}

export class radioCustomAttribute {
  static inject = [Element];
  constructor(element) { this.element = element; }
  valueChanged(newValue, oldValue) { private_ValueChanged(this, 'radio', newValue); }
}


<ff-button repeat.for="keymen of keyChangeMenu" radio.bind="$index<12" class='ff-button' click.delegate="keyChangeClick($event.target)" id.bind="$index+'_key'" >
  ${keymen[0]}<sup>${keymen[1]}</sup>
</ff-button>