Come aggiungere manualmente contenuti a pluginOutlet dopo una chiamata ajax? E come reindirizzare o aggiornare un pluginOutlet?

Sviluppatore
2

Corretto. Ci sono due modi per procedere…

  1. Puoi rendere la tua personalizzazione un widget, e poi montare il widget nell’outlet del plugin in questo modo:

    {{mount-widget widget="nome-widget"}}

    Puoi vedere un esempio di come viene creato un widget in Discourse, ad esempio il logo della home: discourse/app/assets/javascripts/discourse/app/widgets/home-logo.js at 2dbcea9eeeb816dda347027497b3a49634ef851f · discourse/discourse · GitHub

    In un tema, aggiungeresti il tuo file nome-widget.js a una directory javascripts/discourse/widgets.

    C’è altro sui widget in A tour of how the Widget (Virtual DOM) code in Discourse works, ma tieni presente che stiamo gradualmente eliminando i widget, quindi tutto ciò che imparerai in questo processo non sarà utile a lungo termine.

  2. Mantieni il tuo decoratore di widget così com’è, e crea un componente Ember separato che faccia ciò che desideri nell’outlet del plugin. Stiamo eliminando gradualmente i widget a favore dei componenti Ember (che è ciò su cui si basa la maggior parte di Discourse).

    Questo processo assomiglierebbe a questo:

    1. Crea un file JS e HBS (template) del componente nella directory javascripts/discourse/components del tuo tema.

      • nome-componente.js

      • nome-componente.hbs

    2. Costruisci il tuo componente Ember… purtroppo questo passaggio è essenzialmente “impara Ember” (Guide Ember) … ma penso che questo possa darti un’idea generale per iniziare:

      • In nome-componente.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(); // assumendo che sia json
      this.navLinks = data;
    } catch (error) {
      console.error("Failed:", error);
    }
  }
}

      • In nome-componente.hbs:

        <div {{did-insert this.fetchNavLinks}}>
  {{#each this.navLinks as |link|}}
    <a href={{link.anchor}}>{{link.title}}</a>
  {{/each}}
</div>

        Questo chiamerà l’azione fetchNavLinks ogni volta che il componente viene inserito (in questo caso, quando visiti il sito Discourse e l’app viene renderizzata). Ogni volta che navLinks viene aggiornato, il contenuto del componente si aggiornerà perché è una proprietà tracciata.

        Se vuoi aggiornare i link più spesso che al rendering del componente, dovrai aggiungere altra logica al JS qui… controllando se il percorso corrente (pagina) soddisfa determinate condizioni, ad esempio.

    3. Questo componente verrebbe aggiunto a un outlet del plugin aggiungendolo all’outlet in javascripts/discourse/connectors/below-site-header/my-component-connector.hbs:

      <ComponentName />
9 Mi Piace