使 Aurelia 复选框绑定使用 1[=10=] 而不是 true\false

Question

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

进行此类绑定的正确方法是什么？

Answer 1

checked.bind="变量名=== 1"

并监听click to modify varName click.delegate="setVarName()"

设置变量名(){ 变量名 = 变量名 ? 0：1； )

Answer 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

Answer 3

看起来 Aurelia 这样做的方法是使用值转换器，尤其是当有很多地方需要将 1\0 转换为 true\[= 时16=]:

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'">

使 Aurelia 复选框绑定使用 1[=10=] 而不是 true\false

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

javascript

aurelia