javascript - Aurelia 单向绑定(bind)到复选框

Question

我正在寻找一种方法来在 aurelia 中单向绑定(bind)一个复选框，同时仍然允许该复选框接受用户的点击。

假设一个 View 类似于以下显示可选项目列表之一的 View :

<template>
    <div click.trigger="selected()">
        <label......>${vm.code}</label>
        <label....>${vm.description}</label>
        <img...../>
        <input type="checkbox" checked.one-way="vm.selected"></input>
    </div>
</template>

用户应该能够点击 View 中的任何地方来选择项目，因此 click.trigger="selected()" 被附加到容器。在 selected() 中，复选框绑定(bind)到的 vm.selected 属性被更新。

复选框也应该是可点击的，但应该允许通过 selected() 方法控制选择。

readonly 不能用于 checkbox 的输入控件，因为它用于控制 input.value，在这种情况下它是感兴趣的 checked 属性。

在事件参数上调用 preventDefault 会禁用默认的复选框选中行为，这可以在 Aurelia 中通过从点击委托(delegate)返回 false 来实现。这将需要将另一个处理程序附加到输入控件，并且存在点击由输入控件处理并且不会冒泡到附加到容器的委托(delegate) (selected()) 的问题实际上控制选择。

也许还有另一种我想念的方法，我正在考虑的一种方法是使用两个看起来像选中和未选中复选框的超赞字体图标，并根据 vm.selected 的值在两者之间切换。

Answer 1

更新

关于事件委托(delegate)，如果您没有使用复选框，但浏览器会阻止状态在复选框上切换，那么这个答案确实可以解决问题，因此正如我们所讨论的，最好的方法可能是使用图标或 Sprite 来显示被检查件的“状态”，因为控制应该是单向的，这可以像这样完成 -

<i class="fa fa-${this.selected ? 'check-square-o' : 'square-o'}"></i>

关于授权的原始答案

如果我们使用 delegate 而不是 trigger 那么我们的事件就会冒泡，我们可以更优雅地处理它并防止状态改变 -

<div click.delegate="clicked()">
  <input type="checkbox" click.delegate="clicked(false)" checked.one-way="vm.selected" />
</div>

然后在我们的 View 模型中我们可以处理冒泡的点击事件-

  clicked(event){
    if (event !== false) {
      // do something
    } else {
      return false;
    }
  }

这不是一个完美的解决方案，但它应该可以防止发生更改控件状态的事件，但仍允许该事件在 div 级别发生。