Aurelia 单向绑定到复选框

Question

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

假设一个视图类似于以下显示 select 可用项目列表之一：

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

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

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

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

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

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

Answer 1

更新

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

<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 级别发生。

Aurelia 单向绑定到复选框

Aurelia one-way binding to a checkbox

html

javascript

data-binding

aurelia

更新

关于授权的原始答案