在aurelia中綁定點擊事件

我有一個組件ButtonHtml，它攔截點擊事件，以便它可以將事件發佈到一個組件，以防止多次點擊某個組件以避免雙擊。它在升級aurelia框架之前正在工作。在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-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>

來源

2017-10-11 Matt LaCrosse

沒有看到你如何使用這個自定義元素，很難確切知道發生了什麼。 –

我將編輯OP。 –

您有click可綁定，但你沒有約束力什麼吧。它看起來像你綁定到tap，但這不是你設置的綁定。我可能會傾向於使用click作爲可綁定名稱，因爲這可能會導致與所有HTML元素中的click事件的構建混淆。

只要將可綁定的名稱更改爲tap並且它應該按預期開始工作。

來源

2017-10-11 21:18:36

試過了。它沒有工作。 tap是一個使用hammerjs的自定義屬性，這樣該按鈕可以在ipad上更好地工作。升級之前這一切都正常。 –

那麼，你正試圖調用你的虛擬機上未定義的函數，這就是爲什麼你會得到一個異常拋出。你需要綁定一些東西來''點擊'一切工作。 –

自定義tap屬性是綁定點擊的位置。 –

在aurelia中綁定點擊事件

回答

相關問題