Comment ajouter manuellement des contenus à pluginOutlet après un appel ajax ? Et comment réafficher ou actualiser un pluginOutlet ?

Dev
2

Correct. Il y a deux façons de procéder…

  1. Vous pouvez faire de votre personnalisation un widget, puis monter le widget dans le plugin outlet comme ceci :

    {{mount-widget widget="widget-name"}}

    Vous pouvez voir un exemple de la façon dont un widget est créé dans Discourse, par exemple le logo d’accueil : discourse/app/assets/javascripts/discourse/app/widgets/home-logo.js at 2dbcea9eeeb816dda347027497b3a49634ef851f · discourse/discourse · GitHub

    Dans un thème, vous ajouteriez votre fichier widget-name.js à un répertoire javascripts/discourse/widgets.

    Il y a plus d’informations sur les widgets dans A tour of how the Widget (Virtual DOM) code in Discourse works, mais notez que nous allons progressivement abandonner les widgets, donc tout ce que vous apprendrez dans ce processus ne sera pas utile à long terme.

  2. Gardez votre décorateur de widget tel quel, et créez un composant Ember séparé qui fait ce que vous voulez dans le plugin outlet. Nous avons progressivement abandonné les widgets au profit des composants Ember (qui constituent la majeure partie de Discourse).

    Ce processus ressemblerait à ceci :

    1. Créez un fichier JS et HBS (template) de composant dans le répertoire javascripts/discourse/components de votre thème.

    • component-name.js

    • component-name.hbs

    1. Construisez votre composant Ember… malheureusement, cette étape consiste essentiellement à « apprendre Ember » (Guides Ember) … mais je pense que cela vous donnera une idée générale pour commencer :
    • Dans component-name.js :
    import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

const endpoint = settings.site_navigation_links_endpoint;

export default class ComponentName extends Component {
  @tracked navLinks = null;

  @action
  async fetchNavLinks() {
   try {
      const response = await fetch(endpoint);
      const data = await response.json(); // en supposant que ce soit du json
      this.navLinks = data;
    } catch (error) {
      console.error("Échec :", error);
    }
  }
}
    • Dans component-name.hbs :
    <div {{did-insert this.fetchNavLinks}}>
 {{#each this.navLinks as |link|}}
   <a href={{link.anchor}}>{{link.title}}</a>
 {{/each}}
</div>

    Cela appellera l’action fetchNavLinks chaque fois que le composant sera inséré (dans ce cas, lorsque vous visiterez le site Discourse et que l’application s’affichera). Chaque fois que navLinks sera mis à jour, le contenu du composant sera mis à jour car il s’agit d’une propriété suivie.

    Si vous souhaitez mettre à jour les liens plus souvent qu’au rendu du composant, vous devrez ajouter une logique supplémentaire au JS ici… en vérifiant si la route (page) actuelle remplit certaines conditions, par exemple.

    1. Ce composant serait ajouté à un plugin outlet en l’ajoutant à l’outlet dans javascripts/discourse/connectors/below-site-header/my-component-connector.hbs :
    <ComponentName />
9 « J'aime »