Aurelia Binding Change.delegate не стреляет (JQueryUI Datepicker)

Question

Я пытаюсь использовать Jqueryui DatePicker, и у меня почти все работает. У меня есть пользовательский компонент, который выглядит примерно так (получил код в Интернете)

@inject(Element)
export class Checkbox {
    @bindable({ defaultBindingMode: bindingMode.twoWay }) value = {};
    @bindable datepicker;
    @bindable label;
    @bindable inputLabel;
    element: Element = null;

    constructor(element) {
        this.element = element;
    }

    attached() {
        $(".datepicker").datepicker();
        $(".datepicker").datepicker()
            .on("change", e => this.fireEvent(e.target, "input"));
    }

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

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

Вот шаблон представления:

<template>
    <div class="checkbox">
        <label><input type="checkbox" checked.bind="value.checked & twoWay">${label}</label>
    </div>
    <div show.bind="datepicker == 'true' && value.checked">
        <label class="col-xs-1" style="padding: 0;">from</label>
        <div class="col-xs-11">
            <input class="form-control datepicker" type="text" value.bind="value.date & twoWay"/>
        </div>
    </div>
</template>

Я использую это так:

<checkbox datepicker="true" label.bind="'Checkbox label'" value.bind="filters['MyObject']" change.delegate="AlertSomething()"></checkbox>

Проблема в том, когда я выбираю дату с помощью выбора даты. Событие изменения не запускается. Если я ввожу что-то вручную, оно будет запущено. Он также срабатывает при смене флажка. Что мне здесь не хватает?

Answer 1

Скорее всего, проблема в том, что вы запускаете пользовательское событие на input элемент в шаблоне пользовательского элемента, а не в самом элементе.

Линия

.on("change", e => this.fireEvent(e.target, "input"));

должен стать

.on("change", e => this.fireEvent(this.element, "change"));

Кроме того, немного не по теме, обратите внимание, что с помощью $(".datepicker") может вызвать ошибки в вашем приложении, если этот пользовательский элемент используется более чем в одном месте. Вместо этого вы должны использовать ref Пользовательский атрибут для создания свойства в модели представления для элемента, который вы хотите передать в jQuery. Итак, в этом случае вам нужно сделать это в вашем шаблоне:

 <input class="form-control" ref="datepicker" type="text" 
        value.bind="value.date & twoWay"/>

А затем измените свой код виртуальной машины, чтобы использовать $(this.datepicker)