javascript - aurelia中绑定(bind)点击事件

Question

我有一个组件 ButtonHtml 可以拦截单击事件，以便它可以将事件发布到一个组件，该组件可以防止多次单击某项以防止双击。它在升级 aurelia-framework 之前就可以工作。

现在我收到此错误。我不知道为什么。

ButtonHtml.js:51 TypeError: this.click is not a function at ButtonHtml.buttonClick (ButtonHtml.js:47) at CallScope.evaluate (aurelia-binding.js:1542) at Listener.callSource (aurelia-binding.js:5119) at Listener.handleEvent (aurelia-binding.js:5128)

这是 Html 和 JS

<template>
    <button class="${class} waves-effect btn btn-${isSelected ? 'selected' : type} ${isBlock ? 'btn-block' : ''}" click.trigger="buttonClick()" title="${title}" disabled.bind="disabled">
        <span class.bind="labelVisibility === '' ? '' : labelVisibility" if.bind="label !== ''">${label}</span>
        <i if.bind="icon !== ''" class="material-icons ${label !== '' ? iconLocation : ''}">${icon}</i>
    </button>
</template>

import {bindable, bindingMode, containerless, inject} from 'aurelia-framework';
import {EventPublishingService} from '../../Service/EventServices/EventPublishingService';

@containerless()
@inject(EventPublishingService)
export class ButtonHtml
{
    constructor(eventPublishingService)
    {
        this.eventPublishingService = eventPublishingService;
    }

    /**
     * Style bindings
     */
    @bindable label = '';
    @bindable labelVisibility = '';

    @bindable icon = '';
    @bindable iconLocation= 'left';

    @bindable class = '';
    @bindable({ defaultBindingMode: bindingMode.twoWay }) type = 'primary';    
    @bindable({ defaultBindingMode: bindingMode.twoWay }) isSelected = false;
    @bindable isBlock = false;
    @bindable disabled = false;

    /**
     * Events
     */
    @bindable click;

    /**
     * Native properties
     */
    @bindable title = '';
    @bindable isBlocking = false;

    buttonClick()
    {
        if (this.isBlocking)
        {
            this.eventPublishingService.disableActions();
        }        

        try{
            this.click();
        }
        catch(exception)
        {
            console.error(exception);
        }
    }
}

这是典型用途:

<button-html type="action" icon="done" label="OK" tap.call="Go()"></button-html>

这是 aurelia 库版本

"aurelia-animator-css": "1.0.3", "aurelia-bootstrapper": "2.1.1", "aurelia-dialog": "1.0.0-rc.1.0.3", "aurelia-fetch-client": "1.1.3", "aurelia-framework": "1.1.5", "aurelia-materialize-bridge": "~0.31.0", "aurelia-pal-browser": "1.3.0", "aurelia-polyfills": "1.2.2", "aurelia-router": "1.4.0", "aurelia-templating": "1.5.0", "aurelia-templating-binding": "1.4.0", "aurelia-templating-resources": "1.5.1", "aurelia-templating-router": "1.2.0", "aurelia-validation": "1.1.2",

编辑:

通过将用法更改为 click.call 而不是 tap.call 使其正常工作

<button-html type="action" icon="done" label="OK" click.call="Go()"></button-html>

Answer 1

您有一个可绑定(bind)的click，但您没有将任何内容绑定(bind)到它。看起来您正在绑定(bind)到 tap，但这不是您设置的可绑定(bind)。我可能会反对使用 click 作为可绑定(bind)名称，因为这可能会导致与所有 HTML 元素上的 click 事件中的构建发生混​​淆。

只需将可绑定(bind)的名称更改为 tap，它就应该开始按预期工作。