Aurelia中如何通过输入框值变化控制指定Select的禁用状态

嘿，我看到你在Aurelia项目里碰到了这个麻烦：输入框值变了，但对应的Select下拉框禁用状态没跟着更新。你现在用了BindingEngine监听输入，还维护了布尔数组绑定disable.bind，核心问题其实是数组元素的修改没被Aurelia的绑定系统检测到。这里有两种解决方案，优先推荐第一种，更符合Aurelia的声明式风格：

方案一：直接在模板里写绑定表达式（最省心） #

完全不用额外维护disabledSelects数组，也不用手动写监听逻辑，直接把判断条件写到disable.bind里就行：

模板代码 #

<div repeat.for="input of inputs; index as i">
  <input type="number" value.bind="inputs[i]">
  <select disable.bind="inputs[i] <= 0">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
</div>

ViewModel代码 #

export class App {
  // 初始化输入框默认值为0，对应Select一开始就是禁用状态
  inputs = [0, 0, 0];
}

这种方式完全靠Aurelia的双向绑定自动干活，输入框值一变化，模板里的inputs[i] <= 0会自动重新计算，Select的禁用状态立马就更新了，根本不用自己写监听，省心又不容易出错。

方案二：修复手动监听数组的写法（如果必须用数组的话） #

要是你因为业务需求必须保留disabledSelects数组的写法，那得在修改数组元素后，主动告诉Aurelia“数组变了”：

ViewModel代码 #

import { inject, BindingEngine } from 'aurelia-framework';

@inject(BindingEngine)
export class App {
  inputs = [0, 0, 0];
  disabledSelects = [true, true, true];

  constructor(private bindingEngine: BindingEngine) {
    this.setupInputWatchers();
  }

  setupInputWatchers() {
    this.inputs.forEach((_, index) => {
      // 监听每个输入框的值变化
      this.bindingEngine.propertyObserver(this.inputs, index)
        .subscribe((newValue) => {
          // 更新对应Select的禁用状态
          this.disabledSelects[index] = newValue <= 0;
          // 关键一步：通知绑定系统数组元素已修改
          this.bindingEngine.collectionObserver(this.disabledSelects).refresh();
        });
    });
  }
}

模板代码 #

<div repeat.for="input of inputs; index as i">
  <input type="number" value.bind="inputs[i]">
  <select disable.bind="disabledSelects[i]">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
</div>

为啥之前的代码不生效？因为Aurelia默认只盯着数组的引用变化（比如你重新赋值一个新数组this.disabledSelects = [...newArray]），不会自动检测数组内部元素的修改。所以你直接改disabledSelects[index]的时候，绑定系统根本不知道数组变了，自然不会更新UI。加了collectionObserver.refresh()之后，就强制Aurelia重新检查数组内容，UI也就跟着更新了。

内容的提问来源于stack exchange，提问作者Arton Hoxha