web-dev-qa-db-fra.com

Aurelia delegate vs trigger: comment savoir quand utiliser delegate ou trigger?

J'essaie d'apprendre à travailler avec le framework Aurelia. Ce faisant, je lisais la documentation ici concernant leur méthode de liaison des événements. La documentation suggère d'utiliser délégué par défaut. J'ai ajouté le plunkr qu'ils ont fourni dans un de leurs blogs et ajouté un petit peu à cela. Le plein plunk est ici .

app.html 

<template>
    <input value.bind="pageInput" blur.delegate="showAlert()" placeholder="delegate()" />
    <input value.bind="pageInput" blur.trigger="showAlert()" placeholder="trigger()" />

    <button type="button" click.delegate="showAlert()">delegate()</button>
    <button type="button" click.trigger="showAlert()">trigger()</button>
</template>

app.js 

export class App {
  showAlert() {
    alert('showAlert()');
  }
}

Comme vous pouvez le voir dans le répertoire plunkr, les blur.trigger/click.delegate/click.trigger déclenchent tous les événements, mais blur.delegate ne les déclenche pas.

Pourquoi est-ce le cas?

Comment pouvez-vous déterminer quand .delegate ne va pas fonctionner (sans le tester manuellement bien sûr)?

javascriptaurelia
67
peinearydevelopment

Utilisez delegate sauf lorsque vous ne pouvez pas utiliser delegate.

La délégation d'événements est une technique utilisée pour améliorer les performances des applications. Il réduit considérablement le nombre d'abonnements aux événements en exploitant la caractéristique de "formation de bulles" de la plupart des événements DOM. Avec la délégation d'événements, les gestionnaires ne sont pas attachés à des éléments individuels. Au lieu de cela, un seul gestionnaire d'événements est associé à un nœud de niveau supérieur, tel que l'élément body. Lorsqu'un événement survient jusqu'à ce gestionnaire de niveau supérieur partagé, la logique de délégation d'événements appelle le gestionnaire approprié en fonction de l'événement cible .

Pour savoir si délégation d'événements peut être utilisé avec un événement particulier, google mdn [event name] event. En fait, le fait de faire précéder toute recherche Google liée à une plate-forme Web avec mdn renvoie souvent un résultat de haute qualité fourni par le réseau de développeurs Mozilla. Une fois sur la page MDN de l'événement, vérifiez si l'événement bubbles. Seuls les événements comportant des bulles peuvent être utilisés avec la commande delegate binding d'Aurelia. Les événements blur, focus, load et unload ne bouillonnent pas. Vous devrez donc utiliser le trigger commande de liaison pour vous abonner à ces événements.

Voici le page MDN pour le flo . Il contient des informations supplémentaires sur les techniques de délégation d’événement pour les événements flous et ciblés.

Exceptions aux directives générales ci-dessus:

Utilisez trigger sur les boutons lorsque les conditions suivantes sont remplies:

  1. Vous devez désactiver le bouton.
  2. Le contenu du bouton est composé d'autres éléments (par opposition au texte uniquement).

Cela garantira que les clics sur les enfants du bouton désactivé ne seront pas transmis au gestionnaire d'événements délégué. Plus d'infos ici .

Utilisez trigger pour click dans certains cas d'utilisation iOS:

iOS ne claque pas les événements de clic sur des éléments autres que a, button, input et select. Si vous vous abonnez à click sur un élément non-intrant tel que div et que vous ciblez iOS, utilisez la commande trigger binding. Plus d'infos ici et ici .

104
Jeremy Danyow

En ce qui concerne cela, le délégué flou fonctionnerait si Aurelia écoutait l'événement en phase de capture, mais cela n'est pas possible dans Aurelia. Wold serait intéressant si quelqu'un pourrait donner une idée de la façon de capturer un événement à Aurelia

Dans ce cas, ce qui suit fonctionnera:

<template>
    <input blur.delegate-capture='showAlert()' />
</template>
1
bigopon