Como adicionar manualmente conteúdos ao pluginOutlet após uma chamada ajax? E como re-renderizar ou atualizar um pluginOutlet?

Dev
2

Correto. Existem duas maneiras de fazer isso…

  1. Você pode fazer sua personalização ser um widget e, em seguida, montar o widget no plugin outlet assim:

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

    Você pode ver um exemplo de como um widget é criado no Discourse, por exemplo, o logo inicial: discourse/app/assets/javascripts/discourse/app/widgets/home-logo.js at 2dbcea9eeeb816dda347027497b3a49634ef851f · discourse/discourse · GitHub

    Em um tema, você adicionaria seu arquivo widget-name.js a um diretório javascripts/discourse/widgets

    Há mais sobre widgets em A tour of how the Widget (Virtual DOM) code in Discourse works, mas observe que vamos descontinuar gradualmente os widgets, então qualquer coisa que você aprender neste processo não será útil a longo prazo.

  2. Mantenha seu decorador de widget como está e crie um componente Ember separado que faça o que você deseja no plugin outlet. Estamos descontinuando os widgets em favor de componentes Ember (que é o que a maior parte do Discourse é construída).

    Este processo seria assim:

    1. Crie um arquivo JS e HBS (template) do componente no diretório javascripts/discourse/components do seu tema.

    • component-name.js

    • component-name.hbs

    1. Construa seu componente Ember… infelizmente esta etapa é essencialmente “aprender Ember” (Guias Ember) … mas acho que isso pode lhe dar uma ideia geral para começar:
    • Em 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(); // assumindo que é json
      this.navLinks = data;
    } catch (error) {
      console.error("Falha:", error);
    }
  }
}
    • Em component-name.hbs:
    <div {{did-insert this.fetchNavLinks}}>
 {{#each this.navLinks as |link|}}
   <a href={{link.anchor}}>{{link.title}}</a>
 {{/each}}
</div>

    Isso chamará a ação fetchNavLinks sempre que o componente for inserido (neste caso, quando você visita o site do Discourse e o aplicativo renderiza). Sempre que navLinks for atualizado, o conteúdo do componente será atualizado porque é uma propriedade rastreada.

    Se você quiser atualizar os links com mais frequência do que na renderização do componente, precisará adicionar mais lógica ao JS aqui… verificando se a rota (página) atual atende a certas condições, por exemplo.

    1. Este componente seria adicionado a um plugin outlet adicionando-o ao outlet em javascripts/discourse/connectors/below-site-header/my-component-connector.hbs:
    <ComponentName />
9 curtidas