javascript - Aurelia Binding Change.delegate 未触发(JQueryUI Datepicker)

Question

我正在尝试使用 jqueryui 日期选择器，我几乎已经开始工作了。我有一个看起来像这样的自定义组件(在线获取了一些代码)

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

这是 View 模板:

<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 自定义属性在 View 模型上为要传递给 jQuery 的元素创建一个属性。因此，在这种情况下，您需要在模板中执行此操作:

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

然后更改您的 VM 代码以使用 $(this.datepicker)