2015-09-13 3 views
2

Я использую Semantic-UI с Aurelia и обнаружил, что привязка к семантическому стилю позволяет работать только в одном направлении.Aurelia привязана к стилизованным флажкам

Я создал Plunker, чтобы продемонстрировать: http://embed.plnkr.co/YPyKT0dwubzDCqEPmEPx/preview

В примере, я использую флажки, чтобы фильтровать массив. Есть ли другой метод, который я должен использовать, который будет работать со стилизованными флажками?

+0

ли флажки Семантический UI имеют функцию обратного вызова для того, когда их ценности меняются? Возможно, вы можете передать метод вызова для обновления значения? –

+0

Я написал блог о создании пользовательских элементов для обтекания фреймворков css здесь: http://davismj.me/blog/semantic-custom-element/ –

ответ

3

Система связывания Aurelia прислушивается к сообщениям change и input. Когда они увольняются, привязка обновляется.

Флажок «Семантический пользовательский интерфейс» использует 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

Смежные вопросы