Binding click event in aurelia

Question

I have a component ButtonHtml that intercepts click events so that it can publish the event to a component that prevents clicking on something more than once to keep from double-clicking. It was working prior to upgrading the aurelia-framework.

Now I get this error. I'm not sure why.

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)

Here is the Html and 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);
        }
    }
}

This is a typical use:

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

Here are the aurelia library versions

"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",

Edit:

Got it working by changing the usage to click.call instead of tap.call

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

Without seeing how you are using this custom element, it's hard to know exactly what's happening. — Ashley Grant

Ashley Grant Ashley Grant · Accepted Answer · 2017-10-11T21:18:36

You have a bindable for click, but you aren't binding anything to it. It looks like you're binding to tap, but that isn't a bindable you've set up. I'd probably lean against using click as a bindable name as that might cause confusion with the build in click event on all HTML elements.

Just change the name of the bindable to tap and it should start working as expected.

Binding click event in aurelia

1 Answers