Aurelia 在样式化的复选框上绑定

Question

我将 Semantic-UI 与 Aurelia 一起使用，发现绑定到 Semantic 样式的复选框只能以一种方式工作。

我创建了一个 Plunker 来演示：http://embed.plnkr.co/YPyKT0dwubzDCqEPmEPx/preview

在示例中，我使用复选框来过滤数组。有没有我应该使用的其他方法可以与样式化的复选框一起使用？

Answer 1

Aurelia 绑定系统正在侦听输入的 change 和 input 事件。当这些被激发时，绑定被刷新。

语义 UI 复选框在更新输入的选中属性时使用 jquery 到 trigger a change event。由于某种原因，jquery 触发的合成更改事件未被 Aurelia 捕获，后者使用标准 addEventListener 函数订阅事件。

解决方法如下：

原代码：

$('.ui.checkbox').checkbox();

解决方法：

$('.ui.checkbox').checkbox()
  .on('change', e => fireEvent(e.target, 'input'));

function createEvent(name) {
  var event = document.createEvent('Event');
  event.initEvent(name, true, true);
  return event;
}

function fireEvent(element, name) {
  var event = createEvent(name);
  element.dispatchEvent(event);
}

这是更新后的插件：http://plnkr.co/edit/qG850rRZag0Vb8FM1HZP?p=info

Aurelia 在样式化的复选框上绑定

Aurelia binding on styled checkboxes

javascript

data-binding

semantic-ui

aurelia