带有复选框选择和元素引用禁用的 Aurelia 数组绑定

Question

我正在尝试在不使用额外自定义函数的情况下完成以下操作：

• 将所选项目存储在新数组中
• 仅在选中相应复选框的情况下启用文本框
• 跟踪新数组中的更新值

以下是我的代码的简化示例：

<div repeat.for="item of itemSearch.rates">
  <input type="checkbox" ref="item.$index" model.bind="item" checked.bind="selectedRates">
  <input type="text" disabled.bind="item.$index.checked == false" value.bind="item.total_value">
</div>

目前，只有checked.bind 正在工作。所选项目存储在我的新 selectedRates 数组中。

但是我的disabled.bind 根本没有被触发。
如果我从复选框中删除 checked.bind，disabled.bind 将完美运行。

在提交后，更新后的值似乎会拉到selectedRates有时，并且元素失去焦点。
我知道as mentioned here 不正式支持数组观察，这只是我注意到值得一提的。

问题

1. 有没有办法让checked.bind 与ref 和disabled.bind 一起工作？
   • Example with checked.bind
   • Example without checked.bind
2. 知道为什么我会看到这个数组类似可观察的行为有时吗？

更新

在记录selectedRates 时，我发现“可观察值”问题间歇性地出现在 firebug 中。
当在 html 中显示它时，值的变化总是更新的，@Fabio 使用了BindingEngine 实现以及我的checked.bind。 Chrome 始终显示并记录正确的值。
仍然不知道为什么，或者我是否应该担心这一点。

Answer 1

这是我能找到的最简单的解决方案。可能有更简单的方法。

html

<template>
  <div repeat.for="item of rates">
    <input type="checkbox"  ref="item.check" model.bind="item" change.delegate="updateSelectedRates(item)">
    <input type="text" disabled.bind="item.check.checked" value.bind="item.value">
  </div>

  <br>
  <template repeat.for="rate of selectedRates">${rate.value}</template>
</template>

js

export class App {

  rates =  [ { value: 1 }, {value: 2} ];
  selectedRates = [];

  updateSelectedRates(rate) {
    if (rate.check.checked) {
      this.selectedRates.push(rate);
    } else {
      let index = this.selectedRates.map(rate => rate.value).indexOf(rate.value);
      if (index !== -1) {
        this.selectedRates.splice(index, 1);
      }
    }
  }

}

运行示例https://gist.run/?id=0c2911d065e9725f6f86f45a2422b009

Answer 2

查看文档

http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-checkboxes/1

<input type="checkbox" model.bind="product.id" checked.bind="selectedProductIds">