Search code examples
javascriptaurelia

Make Aurelia checkbox binding use 1\0 instead of true\false

I want to bind input type checkbox to a single variable, checkbox should be checked when variable has value 1 and unchecked if it is 0 or null. When user clicks checkbox - variable should become 1 when checked and 0 when unchecked.

Which is the proper way of doing such binding?

Solution

  • Looks like that Aurelia way of doing this is to use value converter, especially when there are many places where you need to convert 1\0 to true\false:

    export class BooleanValueConverter {
  toView(value, trueValue = 1, falseValue = 0) {
    return value === trueValue
  }

  fromView(boolean, trueValue = 1, falseValue = 0) {
    return boolean ? trueValue : falseValue;
  }
}

    HTML:

    <input type="checkbox" checked.bind="oneOrZeroProp | boolean">

    This converter will work with other values for true and false as well:

    <input type="checkbox" checked.bind="yesOrNoStringProp | boolean:'yes':'no'">