如何访问Aurelia自定义属性中的点击处理程序

Question

是否可以在自定义属性中访问元素的单击处理程序？我想取得这样的成就：

<button click.delegate="callSomeMethod()" log-click>Click</button>

其中log-click是一种自定义属性，它包裹click调用并以某种行为进行装饰。

一个非工作的例子，但显示我想实现的目标：

class LogClickCustomAttribute {
  @bindable click;
  attached() {
    let originalClick = this.click;
    this.click = () => {
      console.log('decoreated!');
      return originalClick();
    };
  }
}

我试图实现的真实用例是一个按钮，该按钮可以自行禁用，直到click处理程序返回的承诺解决。像Promise-btn对角。

<button click.delegate="request()" disable-until-request-resolves>Click</button>

Answer 1

我不知道是否可以在自定义属性中访问标准HTML元素（如button）的属性。但是，如果您为按钮创建自定义元素，这很容易：

gistrun：https：//gist.run/?id=d18de213112c5f21631da457f218ca3f

custom button.html

<template>
  <button click.delegate="onButtonClicked()">Test</button>
</template>

custom button.js

import {bindable} from 'aurelia-framework';
export class CustomButton {
  @bindable() onClicked;
  onButtonClicked() {
    if (typeof this.onClicked === 'function') {
      this.onClicked();
    }
  }
}

log-click.js

import {inject} from 'aurelia-framework';
import {CustomButton} from 'custom-button';
@inject(CustomButton)
export class LogClickCustomAttribute {
  constructor(customButton) {
    this.customButton = customButton;
  }
  bind() {
    let originalOnClicked = this.customButton.onClicked;
    this.customButton.onClicked = () => {
      console.log('decorated!');
      return originalOnClicked();
    };
  }
}

app.html

<template>
  <require from="./custom-button"></require>
  <require from="./log-click"></require>
  <custom-button on-clicked.call="test()" log-click>Test</custom-button>
</template>

app.js

export class App {
  test() {
    console.log("The button was clicked.");
  }
}

Answer 2

您可以将事件处理程序添加到自定义属性的构造函数中的元素。

    @inject(Element)
    export class ClickThisCustomAttribute {
        constructor(element) {
            element.addEventListener('click', () => {
            this.doSomething();
            });
        }
    }

Answer 3

鉴于Aurelia如何附加事件处理程序，您将无法完全做您想要的。

话虽如此，您可以使用下面的简单自定义属性将事件注销到控制台：

log-event.js

import { inject } from 'aurelia-framework';
@inject(Element)
export class LogEventCustomAttribute {
  constructor(el) {
    this.el = el;
  }
  attached() {
    const eventName = this.value || 'click';
    let handler = (e) => console.log('event logged', e);
    if (this.el.addEventListener) { // DOM standard
      this.el.addEventListener(eventName, handler, false)
    } else if (this.el.attachEvent) { // IE
      this.el.attachEvent(eventName, handler)
    }
  } 
} 

Answer 4

我做出的最接近的承诺是：

import { autoinject, bindable } from "aurelia-framework";
@autoinject
export class PromiseClickCustomAttribute {
  @bindable({ primaryProperty: true }) delegate: Function;
  constructor(private element: Element) {
    this.element.addEventListener("click", async () => {
        try {
          this.element.classList.add("disabled");
          this.element.classList.add("loading");
          await this.delegate();
        }
        catch (error) {
            console.error(error);
        }
        finally {
            this.element.classList.remove("disabled");
            this.element.classList.remove("loading");
        }
    })
  }
}

<div class="ui container">
    <h2>Promise Click</h2>
    <div class="ui input">
        <button class="ui button" promise-click.call="alertLater()">Toast Later</button>
    </div>
</div>

alertLater = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        alert("Promise Resolved");
        resolve();
      }, 3000);
    });
  }