Evénement de clic de liaison dans aurelia

Question

J'ai un composant ButtonHtml qui intercepte les événements de clic afin qu'il puisse publier l'événement dans un composant qui empêche de cliquer sur plus d'une fois pour éviter de double-cliquer. Il travaillait avant de mettre à jour le cadre aurélique.

Maintenant, j'ai cette erreur. Je ne suis pas sûr pourquoi.

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)

Voici le Html et 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); 
     } 
    } 
} 

Ceci est une utilisation typique:

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

Voici les versions de la bibliothèque 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",

Edit:

obtenu ce travail en changeant l'usage de click.call au lieu de tap.call

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

Answer 1

Vous avez un bindable pour click, mais vous ne lient pas quoi que ce soit. Il semble que vous liez tap, mais ce n'est pas un lien que vous avez configuré. Je pencherais probablement contre l'utilisation de click comme nom pouvant être lié, car cela pourrait créer une confusion avec la génération de l'événement click sur tous les éléments HTML. Il suffit de changer le nom du bindable pour tap et il devrait commencer à fonctionner comme prévu.