Aurelia Binding Change.delegate Not Firing (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> 

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

Answer 1

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

Линия

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

потребности стать

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

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

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

А затем изменить код VM использовать $(this.datepicker)