19、表单处理与验证：Aurelia框架实践

vim8coder

于 2025-10-06 12:00:43 发布

阅读量16

点赞数

CC 4.0 BY-SA版权

分类专栏：深入Aurelia实战精髓文章标签： Aurelia 表单验证多值选择绑定

本文链接：https://blog.csdn.net/vim8coder/article/details/153854765

深入Aurelia实战精髓专栏收录该内容

32 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

表单处理与验证：Aurelia框架实践

1. 多值选择绑定

在应用中，我们希望实现一个功能，允许将书籍分配到一个或多个书架。这非常适合使用多值选择元素，将其绑定到视图模型上的选定值数组。由于多选择控件在简洁的编辑书籍表单中一直显示会显得有些笨拙，因此我们添加一个模板条件，以便在用户点击“编辑”按钮时按需显示该控件。

在修改视图以实现此功能之前，需要在构造函数中初始化一个新的 editingShelves 布尔字段，以指示是否应显示多选择控件。以下是相关代码：

@inject(EventAggregator, BookApi ) 
export class EditBook{

    @bindable editMode;
    @bindable book;
    @bindable selectedGenre; 
    constructor(eventAggregator, bookApi ){
        // ...
        this.bookApi = bookApi;
        this.editingShelves = false;          
    }
}

接下来，需要修改 edit-book.html 视图文件以支持新的多选择书架控件。具体步骤如下：
1. 添加带有 multiple 属性的新 select 元素。
2. 使用 show.bind 绑定命