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> 

問題は、datepickerで日付を選択するときです。変更イベントは発生していません。手作業で何か入力すれば、それは解雇されます。また、チェックボックスが変更されたときに起動します。私はここで何が欠けていますか？

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)