Aurelia Binding Change.delegate Nicht feuernd (JQueryUI Datepicker)

Question

Ich versuche, einen jqueryui datepicker zu verwenden, und ich habe es fast funktioniert. Ich habe eine benutzerdefinierte Komponente, die so etwas wie dieses (einige Code online bekam) sieht

@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); 
    } 
} 

Hier ist der Ansicht-Vorlage:

<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> 

ich es wie folgt mit:

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

Das Problem ist, wenn ich ein Datum mit dem Datumsauswahl auswählen. Das Änderungsereignis wird nicht ausgelöst. Wenn ich etwas manuell eintippe, wird es ausgelöst. Es wird auch ausgelöst, wenn das Kontrollkästchen geändert wird. Was fehlt mir hier?

Answer 1

Das Problem besteht wahrscheinlich darin, dass Sie ein benutzerdefiniertes Ereignis für das Element input in der Vorlage Ihres benutzerdefinierten Elements und nicht für das benutzerdefinierte Element selbst auslösen.

Die Linie

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

Bedürfnisse

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

Auch werden, etwas off-topic, bitte beachten Sie, dass die Verwendung von $(".datepicker") wahrscheinlich ist, um Fehler in der Anwendung verursachen, wenn das benutzerdefinierte Element verwendet wird, in mehr als ein Ort. Statt dessen sollten Sie das benutzerdefinierte Attribut ref verwenden, um eine Eigenschaft im Viewmodel für das Element zu erstellen, das Sie an jQuery übergeben möchten. Also, in diesem Fall würden Sie müssen dies in der Vorlage tun:

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

Und dann Ihre VM-Code ändern verwenden $(this.datepicker)