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，我注意到值得一提。

问题

有没有办法让checked.bind与ref＆amp; disabled.bind？
- Example with checked.bind
- Example without checked.bind
任何想法为什么我看到这个数组可观察的行为有时候？

更新

我在登录selectedRates时发现“可观察值”问题在萤火虫中间歇出现。
在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">

Aurelia数组绑定与复选框选择和元素引用禁用

2 个答案: