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

我试图在不使用额外自定义函数的情况下完成以下任务：

• 将选定项存储在新数组中
• 仅当选中相应的复选框时才启用文本框
• 跟踪新数组中的更新值

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

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

目前，在上述情况下，只有选中的

.bind

起作用。所选项目存储在我的新

selectedRates

数组中

但是，我的

已禁用。绑定根本没有被触发。

如果我从复选框中删除
checked.bind
，
disabled.bind
工作正常

此外，更新后的值有时会在提交后拖到选定的日期，元素失去焦点。

我知道阵列观测并没有得到官方的支持，我注意到这一点值得一提

问题

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);
      }
    }
  }

}

是否有办法选中
。bind
与
ref
和
禁用一起工作。bind
？




你知道为什么我有时会看到这种阵列的行为吗
更新

我发现firebug在记录
selectedRates


在html中显示它时，总是会更新值更改，@Fabio使用了
BindingEngine
实现以及选中了my
的.bind
。Chrome始终显示并记录正确的值。

仍然不知道为什么，或者我是否应该关心这个问题。
这是我能找到的最简单的解决方案。也许有更简单的方法

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>

运行示例参见文档



谢谢您的反馈@Fabio。将
selected
属性添加到我的对象中会起作用，但如果可能的话，我还是不希望使用自定义函数。这可能是为什么选中了
。bind
与禁用的
ref
&
一起工作的错误。bind
？至于可观察的值，我发现只有在记录所选数据时，问题才真正出现在firebug中。在html中显示时，值更改始终会更新，您可以使用
BindingEngine
实现，也可以选中my
。bind
。Chrome始终显示并记录正确的值。它将数组的索引分配给该属性，并在禁用
的情况下正常工作。bind=“item.$index.checked==false”
。请注意以下示例与事实之间的差异。。。你说得对。我认为你应该在政府部门公开一个问题repo@JvR我找到了一个更简单的解决办法。查看我的最新答案
<input type="checkbox" model.bind="product.id" checked.bind="selectedProductIds">