aurelia - 如何访问 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 得到解决。 Like promise-btn for Angular 。

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

Answer 1

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

要点运行:https://gist.run/?id=d18de213112c5f21631da457f218ca3f

自定义按钮.html

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

自定义按钮.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.");
  }
}