3

我正在寻找一种在 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不能在用于控制的checkboxas 的输入控件上使用input.value，在这种情况下，它是checked感兴趣的属性。

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

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

4

1 回答 1

3

更新

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

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

关于代表团的原始答案

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

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

于 2015-04-15T00:06:14.070 回答