使 Aurelia 复选框绑定使用 1\0 而不是 true\false答案

【问题标题】：Make Aurelia checkbox binding use 1\0 instead of true\false使 Aurelia 复选框绑定使用 1\0 而不是 true\false
【发布时间】：2021-10-06 10:46:36
【问题描述】：

我想将输入类型复选框绑定到单个变量，当变量值为1 时应选中复选框，如果它是0 或null，则应取消选中复选框。当用户单击复选框时 - 选中时变量应变为 1，未选中时应变为 0。

进行这种绑定的正确方法是什么？

【问题讨论】：

标签： javascript aurelia

【解决方案1】：

checked.bind="varName === 1"

并监听点击修改varName click.delegate="setVarName()"

setVarName () { 变量名 = 变量名？ 0：1； )

【讨论】：

【解决方案2】：

复选框的 Aurelia 绑定支持布尔值或对象、数字或字符串数组。一种标准方法是使用布尔可观察属性并将其值更改映射到数字（0 或 1）变量：

import { observable } from "aurelia-framework";

export class App {
  @observable trueOrFalse: boolean = false;
  oneOrZero: number = 0;

  trueOrFalseChanged(newValue: boolean) {
    this.oneOrZero = this.trueOrFalse ? 1 : 0;
  }
}

<template>
  <label>
    <input type="checkbox" checked.bind="trueOrFalse" />
    Checkbox
  </label>
  Value: ${oneOrZero}
</template>

有关工作示例，请参阅：sandbox

【讨论】：

不错的解决方案，但如果 oneOrZero 属性在数组内的对象内，并且输入类型复选框是在该数组顶部使用 repeat.for 创建的，则将不起作用。

【解决方案3】：

看起来Aurelia这样做的方式是使用值转换器，尤其是当有很多地方需要将1\0转换为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">

此转换器也适用于 true 和 false 的其他值：

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

【讨论】：