Question

我有一个组件ButtonHtml拦截点击事件，以便它可以将事件发布到一个组件，该组件可以防止多次点击某些内容而不会双击。它在升级aurelia框架之前工作。

现在我收到了这个错误。我不确定为什么。

ButtonHtml.js：51 TypeError：this.click不是函数在ButtonHtml.buttonClick（ButtonHtml.js：47）在CallScope.evaluate（aurelia-binding.js：1542）在Listener.callSource（aurelia-binding.js：5119）在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

1 个答案: