Aurelia 不更新数组中对象的值

Question

我有一个名为 options 的对象数组，每个选项对象都有一个名为 showThis 的布尔值。在我的 html 中，我在 options 数组上使用了一个中继器，并将一个复选框绑定到 showThis 属性。我需要在一个方法中更新 showThis 的值，这样我就可以在值发生变化时触发保存。但是，绝对无论我做什么，屏幕上的值都不会更新以反映我方法中 showThis 值的变化。更新值没有任何作用，使用 splice() 也没有任何作用。

这是我的 html:

        <div class="row" repeat.for="option of options">
            <div class="col">
                <div class="form-group">
                    <div class="form-check">
                        <input click.delegate="checkChanged(option, $index)" checked.bind="option.showThis" type="checkbox">
                        <label class="form-check-label">
                            ${option.friendlyName}
                        </label>
                    </div>
                </div>
            </div>
        </div>

这是我的（当前版本）checkChanged方法：

checkChanged(option, optionIndex){
    let self = this;
    option.showThis = !option.showThis;
    self.save();
}

我也使用 splice() 尝试过这个版本，没有任何变化：

checkChanged(option, optionIndex){
    let self = this;
    self.options.splice(optionIndex, 1);
    option.showThis = !option.showThis;
    self.options.splice(optionIndex, 0, option);
    self.save();
}

Answer 1

click.delegate 在 input 更新值后还原更改。要跟踪更改，您可以将 change.delegate 添加到父级 div。

<div change.delegate="save()">
  <div class="row" repeat.for="option of options">
    <div class="col">
      <div class="form-group">
        <div class="form-check">
          <input checked.bind="option.showThis" type="checkbox">
          <label class="form-check-label">
            ${option.friendlyName}
          </label>
        </div>
      <div>
    </div>
  </div>
</div>

这将在所有元素触发的 change 事件上调用 save，而不仅仅是复选框。如果这是不可取的，您可以将委托移动到特定元素。

Aurelia 不更新数组中对象的值

Aurelia not updating value of object in array

ecmascript-6

aurelia