Cargando temas en un nuevo outlet de plugin que he añadido

Desarrollador
1

Hola. Estoy intentando pasar una lista de temas a {{topic-list topics=myChosenTopics}} en una nueva plantilla que he creado en un plugin.

Así que estoy tratando de averiguar cómo establecer el valor de “myChosenTopics” en mi archivo JS para que pueda pasarse a topic-list.

Lo más cercano que he encontrado es el método setupComponent(args, component) {..component.set('myChosenTopics', myChosenTopics); descrito aquí: https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949.

¿Existe una mejor manera?

Si no, parece que este método solo funciona al vincularse a una clase conectora (es decir, con un plugin outlet). ¿Hay pasos especiales que deba seguir para agregar un nuevo plugin outlet a una plantilla?

2

Creo que he logrado que esto funcione. Objetivo: cargar ciertos temas en un punto específico de una nueva plantilla (probablemente también funcione para agregar a plantillas existentes, pero no lo he probado):

  1. Inserta tu outlet de plugin inventado en tu plantilla (mi outlet de plugin inventado se llama “great-topics”, así):

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

  1. Añade el código Handlebars (es decir, tu componente) en un conector:

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

<div>¡Estoy en el outlet del plugin! Cargar los temas:
</div>
{{topic-list topics=featuredTopics showPosters=true}}
  1. Añade el código JavaScript para el componente que está en tu nuevo conector:

[tu-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.js.es6
[este código está adaptado del siguiente post en Meta que tiene código que carga temas con la etiqueta “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 = [];
   // Crear un array vacío, añadiremos los temas a él

   var featuredUsers = result.users;
   // Obtener los usuarios relevantes

   result.topic_list.topics.slice(0, 4).forEach(function (topic) {
   // Estamos extrayendo los temas desde el 0 hasta el 4
   // Esto significa que mostraremos 3 en total. Aumenta 4 para ver más.

     topic.posters.forEach(function (poster) {
        poster.user = $.grep(featuredUsers, function (e) { return e.id == poster.user_id; })[0];
                        });
         // Asociar usuarios con nuestro tema

      featuredTopics.push(Topic.create(topic));
        // Añadir nuestros temas al array featuredTopics
     });
   }) // fin result.topic.topic_list...
                    
component.set('featuredTopics', featuredTopics);  // aquí es donde se añaden los temas al componente
 
component.set("loadingTopics", false); // mi código anterior no tiene un indicador de carga. pero esto está aquí si quieres uno. Debes añadirlo también al archivo hbs. Ver el post en Meta enlazado arriba

  }); // fin ajax 


 }// fin setup component

Esto funciona para mí, al menos, para cargar temas con la etiqueta “featured” en el outlet del plugin de mi nueva plantilla.

Para ver esto funcionando, tendrás que reiniciar el servidor.

3

Esta idea suena interesante.