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

是否可以访问自定义属性中元素的单击处理程序？我想实现这样的目标：

点击

其中，

log click

是一个自定义属性，它包装了

click

调用，并用一些行为装饰它

一个不起作用的示例，但显示了我想要实现的目标：

类日志单击自定义属性{
@可绑定点击；
附（{
让originalClick=this.click；
这个。点击=（）=>{
console.log（'decreated！'）；
返回originalClick（）；
};
}
}

我试图实现的真正用例是一个按钮，它会禁用自身，直到

click

handler返回的承诺得到解决

点击

我不知道是否可以在自定义属性中访问标准HTML元素的属性，如

按钮

。但是，如果为按钮创建自定义元素，则这很容易：

吉斯特伦：

自定义按钮.html

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

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

log click.js

import {bindable} from 'aurelia-framework';

export class CustomButton {
  @bindable() onClicked;

  onButtonClicked() {
    if (typeof this.onClicked === 'function') {
      this.onClicked();
    }
  }
}

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();
    };
  }
}

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

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)
    }
  } 
} 

app.html

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

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

---

考虑到Aurelia是如何连接事件处理程序的，您将无法完全按照自己的意愿进行操作

也就是说，您可以使用以下简单的自定义属性将事件注销到控制台：

记录事件.js

import {bindable} from 'aurelia-framework';

export class CustomButton {
  @bindable() onClicked;

  onButtonClicked() {
    if (typeof this.onClicked === 'function') {
      this.onClicked();
    }
  }
}

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();
    };
  }
}

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

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)
    }
  } 
} 

---

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

    @inject(Element)
    export class ClickThisCustomAttribute {

        constructor(element) {
            element.addEventListener('click', () => {
            this.doSomething();
            });
        }
    }

---

我做出的最接近承诺是：

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");
        }
    })
  }
}

---

这并没有回答OP的问题。他们想创建一个自定义属性，而不是自定义元素。这确实回答了OP的问题。My

log click

是一个自定义属性，可与My

自定义按钮一起使用。是。对不起，我说错了，不过OP还是想在标准元素上处理这个问题。谢谢！事实上，我之所以提出自定义属性要求，是因为我对角度的解决方案有偏见。自定义组件工作得很好。由于我总是发现在现代JS中很难将任何东西作为包发布，我所能做的就是发布。OP说，“我试图实现的真正用例是一个按钮，在单击处理程序返回的承诺得到解决之前，它会禁用自身。就像Angular的承诺btn。”我看不出在自定义属性中您在哪里可以访问click handler函数，这是从中获取返回承诺所必需的，以便在承诺解析后可以启用按钮。分离视图模型时不要忘记删除侦听器！很好的解决方案，但请注意，使用
。调用
绑定命令时效果更好，因为它保留了
这个
上下文
promise click.call=“alertLater”
很好，我实际上是在以后更新的。当使用
call
时，您使用括号调用该方法，这很好，因为它与您在正常单击时调用其他Aurelia方法的方式一致
promise click.call=“alertLater（）”
我还将单击包装在了一个try catch中，在分离视图模型时不要忘记删除侦听器！