¿Cómo agregar manualmente contenido a pluginOutlet después de una llamada ajax? ¿Y cómo volver a renderizar o actualizar un pluginOutlet?

Desarrollador
2

Correcto. Hay dos maneras de hacerlo…

  1. Puedes hacer que tu personalización sea un widget y luego montar el widget en el plugin outlet de esta manera:

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

    Puedes ver un ejemplo de cómo se crea un widget en Discourse, por ejemplo el logo de inicio: discourse/app/assets/javascripts/discourse/app/widgets/home-logo.js at 2dbcea9eeeb816dda347027497b3a49634ef851f · discourse/discourse · GitHub

    En un tema, añadirías tu archivo widget-name.js a un directorio javascripts/discourse/widgets.

    Hay más información sobre widgets en A tour of how the Widget (Virtual DOM) code in Discourse works, pero ten en cuenta que vamos a eliminar gradualmente los widgets, por lo que cualquier cosa que aprendas en este proceso no será útil a largo plazo.

  2. Mantén tu decorador de widget como está y crea un componente Ember separado que haga lo que quieras en el plugin outlet. Hemos estado eliminando gradualmente los widgets en favor de los componentes Ember (que es en lo que se basa la mayor parte de Discourse).

    Este proceso se vería así:

    1. Crea un archivo JS y HBS (plantilla) del componente en el directorio javascripts/discourse/components de tu tema.

    • component-name.js

    • component-name.hbs

    1. Construye tu componente Ember… desafortunadamente este paso es esencialmente “aprender Ember” (Guías de Ember) … pero creo que esto te dará una idea aproximada para empezar:
    • En 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(); // asumiendo que es json
      this.navLinks = data;
    } catch (error) {
      console.error("Falló:", error);
    }
  }
}
    • En component-name.hbs:
    <div {{did-insert this.fetchNavLinks}}>
 {{#each this.navLinks as |link|}}
   <a href={{link.anchor}}>{{link.title}}</a>
 {{/each}}
</div>

    Esto llamará a la acción fetchNavLinks cada vez que se inserte el componente (en este caso, cuando visites el sitio de Discourse y la aplicación se renderice). Cada vez que navLinks se actualice, el contenido del componente se actualizará porque es una propiedad rastreada.

    Si quieres actualizar los enlaces con más frecuencia que al renderizar el componente, necesitarás añadir algo más de lógica al JS aquí… comprobando si la ruta actual (página) cumple ciertas condiciones, por ejemplo.

    1. Este componente se añadiría a un plugin outlet añadiéndolo al outlet en javascripts/discourse/connectors/below-site-header/my-component-connector.hbs:
    <ComponentName />
9 Me gusta