Carregando tópicos em um novo outlet de plugin que adicionei

Dev
1

Olá. Estou tentando passar uma lista de tópicos para {{topic-list topics=myChosenTopics}} em um novo modelo que criei em um plugin.

Então, estou tentando descobrir como definir o valor de “myChosenTopics” no meu arquivo JS para que ele possa ser passado para topic-list.

O mais próximo que encontrei é o método setupComponent(args, component) {..component.set('myChosenTopics', myChosenTopics); descrito aqui: https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949.

Existe uma maneira melhor?

Se não, parece que esse método só funciona ao vincular a uma classe de conector (ou seja, com uma saída de plugin). Existem etapas especiais que preciso seguir para adicionar uma nova saída de plugin a um modelo?

2

Acho que consegui fazer isso funcionar. Objetivo: carregar certos tópicos em um local específico em um novo modelo (provavelmente funciona também para adicionar a modelos existentes, mas ainda não testei isso):

  1. Insira seu plugin outlet fictício no seu modelo (meu plugin outlet fictício se chama “great-topics”, por exemplo):

{{plugin-outlet name="great-topics"}}

  1. Adicione o código Handlebars (ou seja, seu componente) em um conector:

[seu-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.hbs

<div>Estou no plugin outlet! Carregando os tópicos:</div>
{{topic-list topics=featuredTopics showPosters=true}}
  1. Adicione o código JavaScript para o componente que está no seu novo conector:

[seu-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.js.es6
[este código foi adaptado do seguinte post no Meta que contém código para carregar tópicos com a tag “featured”: https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949]

const ajax = require('discourse/lib/ajax').ajax;
const Topic = require('discourse/models/topic').default;

setupComponent(args, component) {
 ajax("/tag/featured.json").then(function (result) {
                 
   let featuredTopics = [];
   // Crie um array vazio, vamos adicionar os tópicos nele

   var featuredUsers = result.users;
   // Obtenha os usuários relevantes

   result.topic_list.topics.slice(0, 4).forEach(function (topic) {
   // Estamos extraindo os tópicos começando em 0 e terminando em 4
   // Isso significa que mostraremos 3 no total. Aumente 4 para mostrar mais.

     topic.posters.forEach(function (poster) {
        poster.user = $.grep(featuredUsers, function (e) { return e.id == poster.user_id; })[0];
                        });
         // Associe os usuários ao nosso tópico

      featuredTopics.push(Topic.create(topic));
        // Adicione nossos tópicos ao array featuredTopics
     });
   }) // fim de result.topic.topic_list...
                    
component.set('featuredTopics', featuredTopics);  // é aqui que os tópicos são adicionados ao componente
 
component.set("loadingTopics", false); // meu código acima não tem um loader, mas isso está aqui caso você queira um loader. É necessário adicionar ao arquivo hbs também. Veja o post vinculado no Meta acima

  }); // fim do ajax 


 }// fim do setupComponent

Isso está funcionando para mim, pelo menos, para carregar tópicos com a tag “featured” no plugin outlet do meu novo modelo.

Para ver isso funcionando, será necessário reiniciar o servidor.

1 curtida
3

Essa ideia parece interessante.