Привязка Aurelia к стилизованным флажкам

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

Я создал планкер для демонстрации: http://embed.plnkr.co/YPyKT0dwubzDCqEPmEPx/preview

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


javascript data-binding semantic-ui aurelia
person Willy Farrell    schedule 13.09.2015    source источник
comment
Имеют ли флажки Semantic UI обратный вызов при изменении их значений? Возможно, вы можете передать метод для вызова, чтобы обновить значение?   -  person PW Kad    schedule 13.09.2015
comment
Я написал блог о создании пользовательских элементов для обертывания CSS-фреймворков здесь: davismj.me/blog /семантический-пользовательский-элемент   -  person Matthew James Davis    schedule 02.08.2016

Ответы (1)


arrow_upward
3
arrow_downward

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

Флажок Semantic UI использует jquery для инициировать событие изменения, когда оно обновляет проверенное свойство ввода. По какой-то причине синтетическое событие изменения, запускаемое 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

person Jeremy Danyow    schedule 13.09.2015
comment
Большое спасибо! Именно то, что мне было нужно. - person Willy Farrell; 13.09.2015