aurelia中绑定点击事件

Question

我有一个组件 ButtonHtml 可以拦截点击事件，这样它就可以将事件发布到一个组件，该组件可以防止多次点击某些东西以防止双击。它在升级 aurelia 框架之前工作。

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

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

您有 click 的可绑定对象，但您没有绑定任何内容。看起来您要绑定到 tap，但这不是您设置的可绑定对象。我可能会反对使用 click 作为可绑定名称，因为这可能会导致与所有 HTML 元素上的 click 事件中的构建混淆。

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

aurelia中绑定点击事件

Binding click event in aurelia

javascript

aurelia