Aurelia 单向绑定到复选框

Question

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

假设一个类似于以下的视图，它显示一个可选项目列表：

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

用户应该能够单击视图中的任意位置来选择项目，因此click.trigger="selected()" 已附加到容器。在selected() 内，复选框绑定的vm.selected 属性被更新。

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

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

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

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

Answer 1

更新

关于事件的委托，如果您不使用复选框，但浏览器阻止状态切换复选框，则此答案确实解决了问题，因此我们讨论过最好的方法可能是使用图标或精灵来显示检查件的“状态”，因为控制应该是单向的，可以这样完成 -

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

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

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

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