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会禁用默认复选框选中行为，这可以通过从点击代理返回false在Aurelia中实现。这将需要将另一个处理程序附加到输入控件，并且具有输入控件处理单击的问题，并且不会冒泡到附加到容器（selected()）的委托以实际控制选择

也许还有另一种方法可以解决这个问题，我考虑的是使用两个字体很棒的图标，看起来像是经过检查和未经检查的复选框，并根据vm.selected的值在两者之间切换。 / p>

Answer 1

更新

在事件委托中，如果您没有使用复选框但浏览器阻止状态切换复选框，则此答案可以解决问题，因此我们讨论了最佳方法可能是使用图标或精灵来显示＆＃39;状态＆＃39;由于控件应该是单向的，因此可以像这样完成 -

<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单向绑定到一个复选框

1 个答案:

更新

代表团的原始答案