18、Aurelia 表单元素绑定：单选按钮与下拉选择框的使用

Aurelia 表单元素绑定：单选按钮与下拉选择框的使用

在前端开发中，表单元素的绑定是一项重要的功能，它可以实现视图与数据模型之间的双向数据交互。本文将详细介绍在 Aurelia 框架中如何使用单选按钮（Radio elements）和下拉选择框（Select controls）进行数据绑定，以及如何实现书籍类型选择的功能。

1. 单选按钮（Radio elements）

在 Aurelia 中，单选按钮的使用方式与标准 HTML 类似，但有两个主要区别：
- 通常使用模板重复器（template repeater）来渲染每个可用选项。具有相同名称的单选输入元素会被分组到一个单选按钮组中，组中只能选择一个元素。可以使用 model 属性定义每个元素的值。
- 这些元素可以使用 checked 绑定命令与单个 selectedItem 视图模型属性进行双向数据绑定。与复选框类似，它使用 checked 观察者来监听输入元素上的更改事件，并订阅绑定的视图模型属性的更改，以保持视图和视图模型的同步。不同的是，单选按钮只能绑定到具有单个值的视图模型属性，如数字或字符串，而复选框则绑定到值数组（绑定到单个布尔值的情况除外）。

以下是使用 checked 绑定命令在单选输入元素上可以实现的场景：
| 绑定类型 | 示例代码 |
| ---- | ---- |
| 绑定到布尔值 | <input type='radio' checked.bind='readBook'>