Comment accéder à un click handler dans un attribut personnalisé dans Aurelia ?

Question

Est-il possible d'accéder au gestionnaire de clic de l'élément dans l'attribut personnalisé ? J'aimerais arriver à quelque chose comme ceci :

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

donde log-click est un attribut personnalisé qui englobe l'attribut click et l'agrémente d'un certain comportement.

Un exemple qui ne fonctionne pas, mais qui montre ce que je veux obtenir :

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

Le cas d'utilisation réel que j'essaie de réaliser est un bouton qui se désactive lui-même jusqu'à ce que la promesse renvoyée par click se résout. Comme promise-btn pour Angular .

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

Answer 1

Je ne sais pas s'il est possible d'accéder aux attributs des éléments HTML standard tels que button dans un attribut personnalisé. Cependant, cela est facile si vous créez un élément personnalisé pour les boutons :

GistRun : https://gist.run/?id=d18de213112c5f21631da457f218ca3f

bouton-personnalise.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

Compte tenu de la façon dont Aurélia attache les gestionnaires d'événements, vous ne pourrez pas faire exactement ce que vous voulez.

Ceci étant dit, vous pouvez utiliser un simple attribut personnalisé comme celui ci-dessous pour enregistrer un événement dans la console :

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 3

Vous pouvez ajouter des gestionnaires d'événements à l'élément dans le constructeur de l'attribut personnalisé.

    @inject(Element)
    export class ClickThisCustomAttribute {

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