2015-09-13 48 views
2

我在Aurelia中使用Semantic-UI,并发现在语义样式复选框上的绑定仅适用于一种方式。Aurelia绑定在样式化复选框

我已经创建了一个Plunker证明:http://embed.plnkr.co/YPyKT0dwubzDCqEPmEPx/preview

在示例中,我使用的复选框来过滤的阵列。是否有我应该使用的不同方法可以与样式化的复选框一起使用?

+0

做语义UI复选框有当回调他们的价值观变化也许你可以传递一个方法来调用来更新值? –

+0

我已经写了一篇关于创建用于包装css框架的自定义元素的博客:http://davismj.me/blog/semantic-custom-element/ –

回答

3

Aurelia绑定系统正在监听输入的changeinput事件。当这些被触发时,绑定被刷新。

语义UI复选框在更新输入的checked属性时使用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); 
} 

下面是更新plunker:http://plnkr.co/edit/qG850rRZag0Vb8FM1HZP?p=info

+0

非常感谢!正是我需要的。 – akiddisaster