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自定义属性在viewmodel上为要传递给jQuery的元素创建属性，而不是这样做。因此，在这种情况下，您需要在模板中执行此操作：

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

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

Aurelia绑定Change.delegate未触发（JQueryUI Datepicker）

1 个答案: