Héritage avec le contrôleur de stimulus

Cet article a été initialement publié sur Rails Designer

---

Pour moi, la plus belle chose dans l'utilisation du contrôleur Stimulus est de les utiliser pour de petites choses spécifiques. Vous ne créez pas un gros contrôleur pour un composant, mais créez plusieurs contrôleurs de stimulation plus petits qui font tous leur propre petite chose. Et lorsque vous avez besoin de plus de cohésion, vous pouvez utiliser des supports pour les faire « parler ensemble ».

Mais si vous avez besoin d'un autre contrôleur Stimulus dont la logique chevauche une autre, vous pouvez faire deux choses :

• extraire la logique dans des fonctions distinctes que vous importez ; ou,
• utilisez l'héritage pour obtenir la logique de l'autre contrôleur.

L'héritage est ce que je souhaite explorer aujourd'hui. Récemment, j'ai ajouté un composant d'actions groupées à la bibliothèque de composants de l'interface utilisateur. Cela permet aux utilisateurs de sélectionner plusieurs éléments dans une liste et d'appliquer la même action à tous, par exemple. Supprimer tout. Cela chevauche un peu le composant des cases à cocher. Les deux avaient besoin de la exacte même logique pour sélectionner les éléments. Pour les actions groupées, la sélection des éléments était le début ; il afficherait alors la "barre d'action" avec un compteur.

(voir article original pour le gif émouvant ! ?)

Remarque : Cet article ne concerne pas l'ajout d'actions groupées du début à la fin ! Pour cela, je suggère de consulter Rails Designer (il contient également des centaines de composants prêts à être utilisés dans votre application Rails SaaS).

Voyons d'abord le checkboxes_controller.js (celui inclus avec Rails Designer est un peu plus complexe !).

// app/javascript/controllers/checkboxes_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static values = { checkboxesCheckedCount: Number };

  selectAll() {
    this.setCheckboxesTo(true);
  }

  deselectAll() {
    this.setCheckboxesTo(false);
  }

  setCheckboxesTo(boolean) {
    const checkboxes = this.checkboxes
      .filter(checkbox => !checkbox.disabled)
      .forEach(checkbox => checkbox.checked = boolean);

    this.checkboxesCheckedCountValue = checkboxes.length;
  }

  // …
}

Je pense que c'est assez simple à suivre, non ? Puis le bulk_actions_controller.js :

// app/javascript/controllers/bulk_actions_controller.js
import CheckboxesController from "controllers/checkboxes_controller";

export default class BulkActionsController extends CheckboxesController {
  static values = { open: Boolean };

  // private

  checkboxesCheckedCountValueChanged() {
    this.openValue = this.checkboxesCheckedCountValue;
  }
}

Exécution rapide du code : lorsque les cases à cocherCheckedCountValue changent (qui est une valeur de checkboxes_controller) définissez l'openValue (0 est faux, tout le reste est vrai). Assez facile ! L'openValue est ensuite utilisé pour afficher/masquer la barre d'actions.

Vous pouvez voir qu'il n'hérite pas de Controller, mais de CheckboxesController qui est importé sur la 2ème ligne (au lieu de l'importation typique { Controller } depuis "@hotwired/stimulus";).

Mais tel qu’il est actuellement écrit, cela ne suffira pas. Le checkboxes_controller n'est pas réellement exporté correctement. Faisons-le d'abord :

import { Controller } from "@hotwired/stimulus";

// Was: `export default class extends Controller {`
export default class CheckboxesController extends Controller {
  // …
}

Alors, comment ça marche ? Pour Ruby (et Rails), vous pouvez hériter d'une autre classe comme ceci :

class User < ApplicationRecord
class Integration::Netlify < Integration::Base
# etc.

Rails, ou plus précisément Zeitwerk, charge automatiquement les classes pour vous, donc ci-dessus fonctionnerait tout simplement. Avec une application Ruby typique, les classes ne sont pas non plus chargées automatiquement et vous devez le faire manuellement.

require "application_record"
require "integration/base"
# etc.

Cela ressemble au fonctionnement de JavaScript.

La façon dont vous êtes habitué à écrire des contrôleurs de stimulus (la classe par défaut d'exportation étend le contrôleur) consiste à créer une classe anonyme qui étend le contrôleur de stimulus (semblable à la classe < Integration::Base). Le checkboxes_controller est désormais une classe nommée qui étend le Stimulus Controller.

Maintenant, cela peut être importé sans problème dans bulk_actions_controller. Et c'est ainsi qu'il peut hériter des fonctions et de toutes les autres logiques (this.checkboxesCheckedCountValue) du checkboxes_controller. Gardez à l'esprit que les fonctions privées (celles commençant par un #) ne peuvent pas être utilisées dans d'autres classes JavaScript, ce qui est différent des classes Ruby !

Quand utiliser l’héritage pour les contrôleurs Stimulus

Je ne cherche pas tellement à hériter. Le plus souvent, j'extrais la logique dans sa propre fonction dans un autre fichier et je l'importe à la place (comme l'inclusion ou l'extension de Ruby). Mais parfois, lorsqu'il y a un chevauchement à 100 % avec la logique de l'autre contrôleur et que je n'ai pas besoin d'apporter de modifications à l'autre contrôleur, l'héritage est une option belle et propre.

Donc pour résumer :

• rendre l'autre classe importable et exporter la classe par défaut CheckboxesController extends Controller;
• puis importez la classe dans l'autre contrôleur, importez CheckboxesController depuis "controllers/checkboxes_controller";;
• puis étendez l'autre contrôleur en utilisant la classe par défaut d'exportation du contrôleur importé BulkActionsController extends CheckboxesController {}.

Vous pouvez voir que la syntaxe est assez similaire à celle de Ruby, mais plus verbeuse (mais c'est vraiment unique chez Ruby !).

? Je prévois de publier un livre : JavaScript for Rails Developers. Plus de 50 personnes l'ont déjà précommandé. Serez-vous le prochain ? ❤️

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!